Javascript 图像预加载期间未检测到onerror事件？

我正在尝试预加载许多（数千）的图像，并认为我做得对。我有一个数组中的所有URL（有些是有效的，有些不是）。我循环遍历数组，并将

onload

和

onerror

事件附加到

img.src

函数。当图像事件返回一个

错误时

我不会将其添加到“good”数组中，并且在循环中我

继续

然而，我注意到，虽然这会阻止图像进入我的“好”数组，但它并不总是（实际上我有足够多的图像，我不知道它是否会）。当我真的要将这些图像加载到页面中时，我在控制台中得到了断开的图像符号和一个

404

在预加载时，我在控制台中看到

404

错误，所以我假设它确实检测到一些损坏的图像，但不是全部，或者它们仍然可以进入我的另一个阵列？是否图像加载速度太快，以至于我的

continue

语句无法工作（有数千个）？如果是这样的话，有办法解决吗？我在下面附上了我的代码，在这里我尝试在

.onerror

条件中使用

continue

，但我猜

img.src

使其成为无效的循环条件。谢谢你的帮助

编辑：

src

属性是对象的一个属性，它还将具有

name

和

userName

属性，因此我只想添加具有有效URL的对象。我试图缩写我的代码，但应该添加这一部分（我只添加了前三行，尽管我现在意识到我应该

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

var name='test'，
用户名='testUser'
网址；
对于（i=0；i

onerror

是异步的。它会在将来的某个时候发生。在

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

for（i=0；i

仅供参考。注意，我也在按
this
，而不是
img
，因为变量
img
已被
for
循环的后续迭代更改，但
this
将是刚刚成功加载的图像


如果您想要一个图像预加载程序，它将在最后一个图像加载时通知您，您可以使用代码表单。
onerror
是异步的。它会在将来的某个时候发生。在
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;
}

for（i=0；i

仅供参考。注意，我也在按
this
，而不是
img
，因为变量
img
已被
for
循环的后续迭代更改，但
this
将是刚刚成功加载的图像


如果希望图像预加载程序在加载最后一个图像时发出通知，可以使用代码表单。
Javascript是异步的。加载前会测试您的条件（如果（有效））。
如果要在阵列中推送好的图像，请在“onload”事件中推送它

for（i=0；i

之后，如果要在加载所有图像后添加操作，请添加这样的计数器

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 ...
}

var ImageScont=imgURLs.length，
计数器=0；
对于（i=0；i
Javascript是异步的。加载前会测试您的条件（如果有效）。
如果要在阵列中推送好的图像，请在“onload”事件中推送它

for（i=0；i

之后，如果要在加载所有图像后添加操作，请添加这样的计数器

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 ...
}

var ImageScont=imgURLs.length，
计数器=0；
对于（i=0；i