2

我在 JavaScript 中加载图像时遇到了一些问题。我希望按顺序加载一系列图像，即图像 2 仅在图像 1 完全完成加载时才开始加载。

我发现的问题是onLoad当图像完成加载时 JavaScript 方法不会触发，而是在图像开始加载时触发。因此，无论在队列中的哪个位置，最小的图像总是最先加载。我已经整理了一个简单的例子来说明我在 JS fiddle 中的意思（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;For the currentImgyou can use thisas 将在Image对象上调用处理程序。对于传递其他参数，需要另一种方法。

于 2013-02-06T17:16:15.997 回答
2

看到 2 多年前有人问过这个错误，我确信你已经摆脱了这个错误；尽管如此，我认为为了他人的利益，我会指出我认为是你的错误。

您正在使用imgObj.onLoad而不是imgObj.onload. Javascript 区分大小写，并且没有原生的“onLoad”事件。

修复此问题后，其余代码应该可以正常工作。

于 2015-04-17T05:41:12.147 回答