javascript - 按顺序加载图像列表

Question

我正在开发一个网站，该网站使用 ExpressionEngine 创建以 img1、img2、img3 等作为 ID 的图像列表，并使用其源 imgAddresses[1]、imgAddresses[2]、imgAddresses[3] 创建一个数组等等

我正在尝试创建一个加载第一个图像的函数，然后(当第一个图像完全加载时)加载第二个、第三个等。以下是我到目前为止所拥有的:

function loadImage(counter) {
    var i = document.getElementById("img"+counter);
    if(counter==imgAddresses.length) { return; }
    i.onload = function(){
        loadImage(counter+1)
    }; 
    i.src = imgAddresses[counter];
} 
document.onload=loadImage(0);

刷新页面时有效，但通过 URL 访问页面时无效。据我从研究中得知，这是因为加载缓存图像时不会触发 onload 事件，并且刷新页面会清除缓存，而通过 URL 访问页面则不会。

研究表明，在声明 onload 事件后分配图像的 src 可以解决这个问题，但在这种情况下似乎没有解决这个问题。我想这可能是因为 onload 事件在这种情况下是递归的。

有人对如何确保浏览器加载图像的新副本而不是缓存版本有任何想法吗？或者说这个函数有没有更好的写法？感谢您的帮助!

编辑:我发现的一个解决方案是将 img 源分配更改为:

i.src = imgAddresses[counter] + '?' + new Date().getTime();

这迫使用户每次都加载新的副本，我想这与其说是一个解决方案，不如说是一个解决方法

Answer 1

我唯一能说的是，您没有正确附加 document.onload 处理程序。我无法判断它是否会解决您的问题，因为 image.onload 在所有浏览器中并不可靠，但是 onload 应该设置为函数引用，而这不是您想要的正在做。

相反，你应该有类似的东西:

function loadImage(counter) {
    //initialize the counter to 0 if no counter was passed
    counter = counter || 0;
    var i = document.getElementById("img"+counter);
    if(counter==imgAddresses.length) { return; }
    i.onload = function(){
        loadImage(counter+1)
    }; 
    i.src = imgAddresses[counter];
}

document.onload = loadImage; //instead of loadImage(0);