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

Answer 2

您可以了解浏览器如何管理缓存的资源看看HTML5缓存方法：

HTML5: The cache manifest file

这样就可以避免指定资源的浏览器缓存。

按顺序加载图像列表

2 个答案: