Question

我真的无法弄清楚我的这个preload片段有什么问题。如果if语句不起作用，loadingWrapper消失也没关系。希望有人能发现问题：

//html

<script type='text/javascript'>$(document).ready(function(){preloadImages()});</script>

//js

function preloadImages()
{
var xmlDoc = loadXMLDoc("http://www.wdagdesign.com/ice2/menu.xml");
var y = xmlDoc.getElementsByTagName("title");
var imgCount = y.length;


for(var i=0; i<imgCount;i++)
{
    var imgObj = new Image();
    var $pic = xmlDoc.getElementsByTagName("pic")[i].childNodes[0].nodeValue;

    imgObj.src = $pic;
    imgObj.onLoad = imagesLoaded($pic);
}
}


var $imageCount = 0;

function itemsLength()
{
var xmlDoc = loadXMLDoc("http://www.wdagdesign.com/ice2/menu.xml");
var y = xmlDoc.getElementsByTagName("title");

return y.length;
}




function imagesLoaded($pic)
{

$imageCount += 1;

if($imageCount != itemsLength())
{
    return;

}else{


    createMenu();
    var $loadingWrapper = document.getElementById('loadingWrapper');
    var $loading= document.getElementById('loading');
    TweenMax.to($loadingWrapper,0,{css:{display:'none'}});
    TweenMax.to($loading,0,{css:{display:'none'}});
    $imageCount = 0;


}

}



function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
{
    xhttp=new XMLHttpRequest();
}
else
{
    xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
xhttp.setRequestHeader("Cache-Control", "no-cache");
xhttp.setRequestHeader("Pragma", "no-cache");
xhttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
xhttp.send();
return xhttp.responseXML;
}

希望有人能帮我解决这个问题。问候。

Answer 1

我没有推出自己的图片预加载器（除非你想了解它是如何工作的），而是使用现有的解决方案，例如waitForImages。

这应该与您拥有的代码完全相同：

添加此脚本标记：

<script src="https://raw.github.com/alexanderdickson/waitForImages/master/src/jquery.waitforimages.js"></script>

你可以使用这个JS代码：

$(document).ready(function() {
    $('body').waitForImages({
        waitForAll: true,
        finished: function() {
            createMenu();

            $('#loadingWrapper, #loading').fadeOut();
        }  
    });
});

Answer 2

我认为你的问题在于onLoad方法：

imgObj.onload = imagesLoaded($pic);

它应该是：

imgObj.onload = function () {
    imagesLoaded($pic);
};

在第一种情况下，立即调用imagesLoaded函数。在我的示例中，该函数在加载图像时运行

Answer 3

投下我不太经验的眼睛，2个问题。

你的html脚本需要这个吗？

$(document).ready(function(){preloadImages()});

如果您正在预加载，则需要立即加载，而不一定在文档准备好后加载。

以下;

TweenMax.to($loadingWrapper,0,{css:{display:'none'}});
TweenMax.to($loading,0,{css:{display:'none'}});

显示：“none”将隐藏输出，直到您将其更改为显示：“block”（或其他内容）。我不知道TweenMax.to（）的API，但如果css参数是可选的，请尝试删除它。

Javascript预加载图片代码段不起作用

3 个答案: