在 IE9+10 中图片加载失败

Question

好的，所以对于一个以图形为基础的网站，我必须想出一种方法让用户不要一个接一个地观看每个图像加载。所以我开发了以下代码作为一种预加载器，直到页面上的所有图像都准备好。我知道通常我们不应该延迟查看图片的页面内容，但图片是页面上唯一的内容，所以我选择了虚假预加载这种较小的弊端。

代码的工作原理是这样的：它找到 ul 页面中的所有图像，将它们保存在 var (images) 中，并在作用域中的图像加载后淡入其父 li。它还检查何时从缓存中提取图像。这会创建一个漂亮的空 li 的淡入，这些空 li 被样式化为空框，直到图像本身被加载并触发页面的其余功能。

现在的问题是：ie9 和 ie10 只完成了一半，然后随机停止，因此页面永远不会完成“加载”并且网站无法运行。我已经尝试了一些东西，但我不确定问题是什么。 html和js如下。

图像 html（仅显示 80 件 li 中的两个：

<ul>
   <li class="ch-one link">
        <img class="gif" src="_images/_gifs/_inthemess/inthemess_1.gif" />
    <img src="_images/_spreads/_thumbs/spread-04.jpg" />
   </li>
   <li class="ch-one link">
        <img class="gif" src="_images/_gifs/_inthemess/inthemess_2.gif" />
    <img src="_images/_spreads/_thumbs/spread-05.jpg" />
   </li>
</ul>

鼠标悬停显示gif，jpg是固态。

var images = $('.spreads').find('img');
var loadedLen;
var liLen;
var x = 0, i = 0;

images.each(function () {
        if ($(this).complete) {
            $(this).parent().animate({
                'opacity': '1'
            }, 1000);

            $(this).parent().addClass('loaded');
            checkPageState();
        } else {
            $(this).load(function () {
                $(this).parent().animate({
                    'opacity': '1'
                }, 1000);

                $(this).parent().addClass('loaded');
                checkPageState();
            });
        };

        function checkPageState() {
            //check if all images are loaded
            //if they are animate TOC in
            loadedLen = $('.spreads li.loaded').length;
            liLen = $('.spreads li').length;
            if (loadedLen === liLen) {
                showPages();
                console.log('@showPages call from checkPageState');
            } else if (loadedLen === 10) {
                //fix li height issue
                var imgHeight = $(images[4]).height() + 2;
            };
        };
    });

    function showPages() {
        var ph = $(document).height();  
        //then we call the function that will loop
        //and fade in each image until it reaches the last one
        pageTime = setTimeout(function () {
            clearTimeout(pageTime);
            fadeInEachPage();
        }, 100);

        function fadeInEachPage() {
            if (i < images.length) {
                clearTimeout(pageTime);
                //start the countdown first
                pageTime = setTimeout(function () {
                    i++;
                    fadeInEachPage();
                }, 1);

                theImage = images[i];
                $(theImage).not('.gif').animate({ 'opacity': '1' }, 800);

            } else if (i === images.length) {
                //trash collection
                //fadeInEachPage is called so frequently the program 
                //will pass else if (i === images.length) a few times
                //thus causing the text to pulse in correctly
                if( x === 0 )
                {
                    //adds listener for mouse over effect
                    addGifListener();

                    $('#overview header h1.title').stop().animate({ 'opacity': '0' }, 300);

                    var inTime = setTimeout(function () {
                        clearTimeout(inTime);
                        $('#overview header h1.title').html('Thank you for purchasing the 6 Memos eBook. Simply select a chapter to enjoy full size.');
                        $('#overview header h1.title').stop().animate({ 'opacity': '1' }, 300);
                    }, 2000);

                    var finalTitleTime = setTimeout(function() {
                        clearTimeout(finalTitleTime);
                        $('#overview header h1.title').stop().animate({ 'opacity': '0' }, 300);
                    }, 8000);

                    var finalFadeIn = setTimeout( function() {
                        $('#overview header h1.title').html('6 Memos');
                        $('#overview header h1.title').stop().animate({ 'opacity': '1' }, 300);
                        clearTimeout(finalFadeIn);
                    }, 9000);

                    //trash collection
                    x++;    
                } else {
                    return;
                };

            };
        };
    };

感谢您的帮助！

Answer 1

Musa 建议的解决方案是 $(this).prop('compelete');。

使用$(this).prop('complete')或$('img').prop('complete')会在部署js时捕获页面上已经存在的任何图像文件；而 load() 只检查它是否在 js 部署后加载。

这就是我尝试使用$(this).complete(); 的目的 - 这似乎与 AJAX 相关联，因此没有通过条件，导致其余图像被加载和显示，同时保留在 js 之前加载的图像黑暗——可以这么说。