0

我真的不明白我的这个预加载片段有什么问题，loadWrapper 像 if 语句不起作用一样消失并不重要。希望任何人都可以发现问题：

//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;
}

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

4

3 回答 3

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();
        }  
    });
});
于 2012-12-12T18:56:20.660 回答
0

将我经验不足的目光投向这两个问题。

你的 html 脚本中需要这个吗？

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

如果您正在预加载，您希望它们立即加载，而不一定要在文档准备好之后加载。

以及以下；

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

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

于 2012-12-14T03:25:12.697 回答
0

我认为您的问题出在 onLoad 方法上：

imgObj.onload = imagesLoaded($pic);

它应该是 ：

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

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

于 2012-12-12T18:35:08.293 回答