Question

我正在尝试预加载许多（数千）图像，并认为我做得对。我有一个数组中的所有URL（有些是有效的，有些不是）。我遍历数组，并将onload和onerror事件附加到img.src函数。当图片事件返回error时，我不会将其添加到＆＃34;好＆＃34;数组，我循环中的continue。

然而，我注意到了，虽然这应该可以防止图像进入我的＆＃34;好＆＃34;数组，它并不总是（实际上我有足够的图像，我可以告诉它是否曾经这样做）。当我真正将这些图像加载到页面中时，我在控制台中获得了损坏的图像符号和404。

我在预加载时在控制台中看到404错误，所以我假设它确实检测到一些损坏的图像但不是全部，或者它们仍然可以进入我的其他阵列？可能是图像加载得如此之快以至于我所拥有的continue语句不起作用（有数千个）？如果是这样，有没有办法绕过这个？我在下面添加了我的代码，在这里我尝试在continue条件中使用.onerror，但我猜img.src使其成为无效的循环条件。谢谢你的帮助。

编辑：

src属性是对象的一个属性，它还具有name和userName属性，因此我只想添加带有效网址的对象。我试图缩写我的代码，但应该添加这部分（我只添加了前三行，即使我现在意识到我应该push项目onload

var name = 'test',
    username = 'testUser'
    url;
for(i = 0; i < imgURLs.length; i++) {
    url = url[i];
    var img = new Image();
    valid = true;
    img.onload = function(){
        console.log('New Media Loaded')
    };
    img.onerror = function(){
        console.log('error: bad image source');
        valid = false;
    };
    img.src = url;
    if(valid) {
       goodArray.push(img);
    }
}

Answer 1

onerror是异步的。它发生在将来的某个时间。您在valid或onerror甚至运行之前很久就测试了onload变量。如果您只想将好的图像推送到数组中，那么您应该将它们推入onload处理程序中的数组中，如下所示：

for(i = 0; i < imgURLs.length; i++) {
    var img = new Image();
    img.onload = function(){
        console.log('New Media Loaded')
        goodArray.push(this);
    };
    img.onerror = function(){
        console.log('error: bad image source');
    };
    img.src = url;
}

FYI。请注意，我还推送this，而不是img因为变量img已被for循环的后续迭代更改，但this将成为刚刚成功加载的图像。

如果您想要一个在最后一张图片加载时会通知的图片预加载器，您可以使用代码格式this answer。

Answer 2

Javascript是异步的。您的状况（如果（有效））在加载前进行测试。如果要在阵列中推送好的图像，请在“onload”事件中按下它。

for(i = 0; i < imgURLs.length; i++) {
    var img = new Image();

    img.onload = function(){
        goodArray.push(this);
        console.log('New Media Loaded')
    };

    img.onerror = function(){
        console.log('error: bad image source');
    };

    img.src = url;
}

之后，如果要在加载所有图像后添加操作，请添加类似

的计数器

var imagesCount = imgURLs.length,
    counter     = 0;

for(i = 0; i < imagesCount; i++) {
    var img     = new Image();

    img.onload = function(){
        goodArray.push(this);
        console.log('New Media Loaded')

        counter++;

        if(counter == imagesCount) yourAction();
    };

    img.onerror = function(){

        console.log('error: bad image source');

        counter++;

        if(counter == imagesCount) yourAction();
    };

    img.src = url;
}

function yourAction(){
    // your final action here ...
}

图像预加载期间未检测到错误事件？

2 个答案: