1

我正在一个网站上工作，该网站使用 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();

这迫使用户每次都加载一个新副本，我想这不是一个解决方案，而是一种解决方法

4

2 回答 2

0

我唯一能说的是您没有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);
于 2013-04-18T02:56:42.027 回答
0

你可以知道浏览器将如何管理缓存的资源
看看 HTML5 缓存方法：

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

于 2013-04-18T04:07:06.847 回答