0

私のこのプリロード スニペットの何が問題なのか本当にわかりません。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;
}

誰かがこの問題について私に手を差し伸べてくれることを願っています。ご挨拶。

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

あなたの問題は onLoad メソッドにあると思います：

imgObj.onload = imagesLoaded($pic);

そのはず ：

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

最初のケースでは、imagesLoaded 関数がすぐに呼び出されていました。私の例では、画像がロードされたときに関数が実行されます

于 2012-12-12T18:35:08.293 に答える
0

経験の浅い私の目をこれに向けると、2 つの質問があります。

あなたの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 に答える