Question

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

代码的工作原理如下：它会在ul页面中找到所有图像，将它们保存在var（图像）中，并在范围中的图像加载后淡化其父li。它还检查从缓存中提取图像的时间。这样就可以逐个淡出空的li，它们被设置为空框，直到图像本身被加载并且页面的其余功能被触发。

现在出现问题：ie9和ie10只进入过程中途，然后随机停止，因此页面永远不会完成“加载”，并且网站无法正常运行。我尝试过一些东西，但我不确定问题是什么。 html和js在下面。

图片html（仅显示80个中的两个：

<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

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

使用$(this).prop('complete')或$('img').prop('complete')将在部署js时捕获页面上已有的任何图像文件;而load（）仅检查自部署js以来是否已加载。

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

IE9 + 10中的图像加载失败

1 个答案: