无法让图像预加载在 IE8 中正常工作

Question

我正在制作一个图像幻灯片，允许用户以半全屏方式循环浏览一组图像。这是它的开发版本：

[链接已删除，只是临时链接]

有多种方法可以前进到下一张图像：通过单击大图像，通过选择特定的拇指，通过使用箭头图标甚至键盘箭头。所有这些基本上都使用正确的参数调用 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 是正确的。我尝试过使用 imagePreloader.onLoad （没有 jQuery），但这也没有效果。我一直在调试这个并理解为什么它第一次起作用。

Answer 1

听起来这是由于图像缓存造成的。在某些情况下，当图像缓存在浏览器缓存中时，.load() 无法触发事件处理程序。请参阅有关此问题的这篇文章。

请参阅 $.fn.imagesLoaded jQuery 插件。