Javascript 如果无法加载图像阵列，是否从图像阵列中删除或跳过图像？

我正在尝试使用Javascript为一系列地图图像创建一个简单的动画查看器。我首先将图像加载到一个全局数组中，如下所示

while( datetime <= endDatetime) 
{
   var fname = getImgFnameFromDate(datetime);
   var imgAdd = new Image();
   imgAdd.src = fname;
   imgStore.push(imgAdd);   
   datetime.setMinutes(datetime.getMinutes() + 15);
}

现在，这些地图几乎是实时绘制的，偶尔会丢失一些。文件无法加载，而是在动画过程中生成了一个断开的链接图像。我只想跳过一个没有加载的图像，或者跳过它，或者从数组中删除它

我尝试使用图像宽度属性作为“isLoaded”的代理，例如

function iter()
{         
   ++imgIndex;
   if (loopFlag) imgIndex = imgIndex % imgStore.length;
   document.getElementById("map").src=imgStore[imgIndex].src;
   if (imgStore[imgIndex].width == 0) iter();
}

然而，这是不可靠的，并且经常导致无限循环，因为它似乎在图像有机会加载之前触发

---

我曾尝试为图像指定onError函数，但我无法确定该函数应该做什么。我真的想要某种isLoaded属性，而不是事件。也许我这样做是错误的？

您可以在图像对象加载时设置一个标志，稍后测试该标志：

var fname = getImgFnameFromDate(datetime);
var imgAdd = new Image();
imgAdd.onload = function() {
    this.myLoadFlag = true;
}
imgAdd.src = fname;
imgStore.push(imgAdd);   

然后在其他地方，您可以检查图像是否已加载：

if (imgStore[imgIndex].myLoadFlag) {
   // image has been loaded
}

当使用onload处理程序时，只需确保在设置

.src

属性之前设置它，否则，在某些浏览器中，如果图像已在浏览器缓存中，则会错过onload事件

---

另一种方法（可能使用起来更简单）是使用第二个数组，该数组只包含加载的图像，而您的主代码只使用：

// place we first put images, they go into imgStore only when actually loaded
var imgPending = [];

var fname = getImgFnameFromDate(datetime);
var imgAdd = new Image();
imgAdd.onload = function() {
    imgStore.push(imgAdd);    // now that it's loaded, add it to the images we're using
}
imgAdd.src = fname;
imgPending.push(imgAdd);   

---

然后，使用

imgStore

的代码将只看到实际加载的图像。这样做的一个缺点是，图像以加载顺序进入

imgStore

，而不一定是按照您请求的顺序，因此这种方式的顺序可能不同于以前的方式。

您可以在图像对象加载时设置一个标志，然后测试该标志：

var fname = getImgFnameFromDate(datetime);
var imgAdd = new Image();
imgAdd.onload = function() {
    this.myLoadFlag = true;
}
imgAdd.src = fname;
imgStore.push(imgAdd);   

然后在其他地方，您可以检查图像是否已加载：

if (imgStore[imgIndex].myLoadFlag) {
   // image has been loaded
}

当使用onload处理程序时，只需确保在设置

.src

属性之前设置它，否则，在某些浏览器中，如果图像已在浏览器缓存中，则会错过onload事件

---

另一种方法（可能使用起来更简单）是使用第二个数组，该数组只包含加载的图像，而您的主代码只使用：

// place we first put images, they go into imgStore only when actually loaded
var imgPending = [];

var fname = getImgFnameFromDate(datetime);
var imgAdd = new Image();
imgAdd.onload = function() {
    imgStore.push(imgAdd);    // now that it's loaded, add it to the images we're using
}
imgAdd.src = fname;
imgPending.push(imgAdd);   

---

然后，使用

imgStore

的代码将只看到实际加载的图像。这样做的一个缺点是，图像以加载顺序进入

imgStore

，而不一定是按照您请求的顺序，因此这种方式的顺序可能不同于以前的方式。

谢谢。然而，似乎仍然存在一个问题。按照您的建议，使用onload（）行为创建图像数组后，我尝试在图像上循环，跳过那些没有myLoadFlag=true的图像。不幸的是，它跳过了所有的图像。似乎在图像有机会加载之前（或类似的情况下）触发了此检查。我确保在.src之前设置了onload（）。相比之下，如果我让它只显示所有图像，但打印出来以显示该标志的值，那么它看起来都是正确的；缺少的图像是未定义的，好的图像是真实的。因此，似乎在给图像加载更多的机会时，使用建议的解决方案会错误地判定图像在有机会加载之前没有加载。如果可能的话，我真的很想“强制”加载图像，而不是在浏览器喜欢的时候加载图像？@user1282133-你可以在页面第一次加载时用javascript预加载图像，而不是在需要时尝试稍后通过JS加载图像。这使它们在需要之前有更多的时间加载。没有办法让它们加载得更快。它们需要时间来加载。仅供参考，此代码不会错误地判定图像未加载。它会告诉你他们什么时候还没有加载。您只是希望在它们准备好之前加载它们。除非您使用预加载方案，否则您的代码需要等待，直到它们有时间加载。@user1282133-如果您需要帮助，等待它们加载，我们也可以这样做，但您还没有向我展示足够的您正在做的事情，我真的知道应该建议什么。谢谢您的帮助，您完全正确。我会尽量把我正在做的事情弄清楚。加载需要在用户触发（按play）时进行，因为图像是从传感器网络近实时创建的物理量的地图，并且需要使用最新的图像。我可以强迫用户重新加载整个页面，然后预加载图像，但这似乎不是最优雅的解决方案。用户还应该可以选择刷新动画并获取最新的图像，而无需重新加载整个页面。谢谢。然而，似乎仍然存在一个问题。按照您的建议，使用onload（）行为创建图像数组后，我尝试在图像上循环，跳过那些没有myLoadFlag=true的图像。不幸的是，它跳过了所有的图像。似乎在图像有机会加载之前（或类似的情况下）触发了此检查。我确保在.src之前设置了onload（）。相比之下，如果我让它只显示所有图像，但打印出来以显示该标志的值，那么它看起来都是正确的；缺少的图像是未定义的，好的图像是真实的。因此，似乎在给图像加载更多的机会时，使用建议的解决方案会错误地判定图像在有机会加载之前没有加载。如果可能的话，我真的很想“强制”加载图像，而不是在浏览器喜欢的时候加载图像？@user1282133-你可以在页面第一次加载时用javascript预加载图像，而不是在需要时尝试稍后通过JS加载图像。这就给了