2

JavaScript での画像の読み込みに少し問題があります。一連の画像を順番にロードする必要があります。つまり、画像 1 のロードが完全に終了したときにのみ、画像 2 のロードが開始されます。

私が見つけた問題はonLoad、画像の読み込みが完了したときではなく、画像の読み込みが開始されたときに JavaScript メソッドが起動することです。したがって、キューのどこにあるかに関係なく、最小の画像が常に最初に読み込まれます。JS フィドルで私が意味することの簡単な例をまとめました(HTML と JS コードも以下にあります)。

次の画像の読み込みを開始する前に、画像が完全に読み込まれるまで待つ方法はありますか?確かにそれほど難しいことではありませんか?

注：私はもともとjQuery.load関数を使って書いたのですが、同じ結果を得たので、生のJSをいじっていました。

HTML コード:

<ul>
    <li><img src="" alt="image 1" width="210" height="174"></li>
    <li><img src="" alt="image 2" width="210" height="174"></li>
    <li><img src="" alt="image 3" width="210" height="174"></li>
    <li><img src="" alt="image 4" width="210" height="174"></li>
    <li><img src="" alt="image 5" width="210" height="174"></li>
</ul>

<a href="#" id="loader">Load the images</a>

JS コード:

        var imgArr = [
        "http://media.topshop.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/zine-HP-UK.jpg",
        "http://media.topshop.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/Valentine_UK.jpg",
        "http://media.topshop.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/crop_UK__.jpg",
        "http://media.topshop.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/hitlist_UK--.jpg",
        "http://media.topshop.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/chinese_new_year_UK_new_0402.jpg"
    ],
    totalImgs = imgArr.length,
    count = 0;

    function onLoaded(count) {
        console.log("fired onload "+count);
        var currentImg = $('li:eq('+count+') img');
        currentImg.attr('src', imgArr[count]).css('display','block');
        count++;
        if (count < totalImgs) {
            loadImg(count);
        };
    }

    function loadImg(count) {
        imgObj = new Image()
        imgObj.src = imgArr[count];
        imgObj.onLoad = onLoaded(count);                        
    }

    $('#loader').click(function() {
        loadImg(count);
    });
4

2 に答える 2

4

ここでの問題は、ハンドラ関数が のonloadイベントに割り当てられているのではImageなく、 の戻り値が割り当てられていることですonLoaded。ハンドラーがオブジェクトで呼び出されるときに使用できるimgObj.onload = onLoaded;のは、と言う必要があります。他のパラメーターを渡すには、別の方法が必要です。currentImgthisImage

于 2013-02-06T17:16:15.997 に答える