我正在制作一个图像幻灯片，允许用户在半全屏幕中循环显示一组图像。这是它的开发版本：
[已删除链接，仅为临时链接]
有几种方法可以进入下一张图像：单击大图像，选择特定的拇指，使用箭头图标甚至是键盘箭头。所有这些基本上都使用正确的参数调用js函数loadImage：
function loadImage(id,url) {
// general image loading routine
// enable loader indicator
$("#loading").toggle();
var imagePreloader = new Image();
imagePreloader.src = url;
loading = true;
$(imagePreloader).load(function() {
// load completed, hide the loading indicator
$("#loading").toggle();
// set the image src, this effectively shows the image
var img = $("#bigimage img");
img.attr({ src: url });
// reset the image dimensions based upon its orientation
var wide = imagePreloader.width >= imagePreloader.height;
if (wide) {
img.addClass('wide');
img.removeClass('high');
img.removeAttr('height');
} else {
img.addClass('high');
img.removeClass('wide');
img.removeAttr('width');
}
// update thumb status
$(".photos li.active").removeClass('active');
$("#li-" + id).addClass('active');
// get the title from the active thumb and set it on the big image
var imgTitle = $("#li-" + id + " a").attr('title');
log(id + ":" + imgTitle);
$(".caption h1").text(imgTitle);
// loading routine completed
loading = false;
//return true;
});
}
这里有很多东西与问题无关，但重点是实际预加载和显示所请求的图像。整体在Firefox和Chrome中都运行良好，但在IE8中没有任何反应。奇怪的是，它在我第一次点击下一个箭头或使用键盘箭头时确实有效，之后它就会失败。
我很难调试这个。在单步执行代码时，我发现尽管确保传入的URL是正确的，但实际上从未调用load事件处理程序。我尝试过使用imagePreloader.onLoad（没有jQuery），但也没有效果。我很难调试这个并理解它为什么第一次工作。