无法在IE8中使图像预加载正常工作 [英] Cannot get image preloading to work correctly in IE8

问题描述

我正在制作一个图像幻灯片，允许用户在半全屏幕中循环显示一组图像。这是它的开发版本：

I'm working on an image slideshow that allows users to cycle through a set of images in semi-fullscreen. Here's a development version of it:

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

[link removed, was only temp link]

有几种方法进入下一个图像：通过单击大图像，通过选择特定的拇指，使用箭头图标甚至键盘箭头。所有这些基本上都使用正确的参数调用js函数loadImage：

There are several ways to progress to the next image: by clicking the large image, by picking a specific thumb, by using the arrow icons or even your keyboard arrows. All of these basically call a js function loadImage with the correct params:

    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中没有任何反应。奇怪的是，它在我第一次点击下一个箭头或使用键盘箭头时确实有效，之后它就会失败。

There's a lot of stuff in there not relevant for the question, but the focus is on the actual preloading and showing of the requested image. The whole is working perfectly in both Firefox and Chrome, yet in IE8 nothing happens. Oddly, it does work the first time I click on the next arrow or use the keyboard arrow, after that it simply fails.

我很难调试这个。在单步执行代码时，我发现尽管确保传入的URL是正确的，但实际上从未调用load事件处理程序。我尝试过使用imagePreloader.onLoad（没有jQuery），但也没有效果。我很难调试这个，并理解它为什么第一次工作。

I'm having a tough time debugging this. In stepping through the code I see that the load event handler is never actually called, despite being sure that the URL passed in is correct. I've tried with imagePreloader.onLoad (without the jQuery) but that has no effect either. I'm stuck debugging this and understanding why it works the first time.

推荐答案

这听起来像是由于图像缓存。在某些情况下，当图像缓存在浏览器缓存中时， .load（）无法触发事件处理程序。请参阅此帖子。

It sounds like it is due to image caching. In some cases the .load() fails to fire the event-handler when the image is cached in your browser cache. See this post on the issue.

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

这篇关于无法在IE8中使图像预加载正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！