如果加载失败，从Image数组中删除或跳过图像？

Question

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

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

然后通过它们在每个图像之间进行短暂等待循环。

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

现在，地图是在接近实时的情况下制作的，偶尔会有一些会丢失。该文件无法加载，而是在动画中间给出断开的链接图像。我想简单地跳过未加载的图像，可以跳过它或从阵列中删除它。

我已经使用图像宽度属性为“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属性，而不是事件。也许我正在以这种错误的方式去做？

Answer 1

您可以将图像对象上设置一个标志，当它加载和以后测试标志：

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，不一定按照您请求的顺序排列，因此这种方式的订单可能会与以前的方式不同。