时间戳

首页 > 解决方案 > 是否可以使用 Javascript 重新下载页面上所有失败的图像？

javascript - 是否可以使用 Javascript 重新下载页面上所有失败的图像？

问题描述

有时，在某些条件下（例如，使用 VPN 或代理）并非所有图像都可以下载页面。这些图像看起来像带有十字架等的空方块（无法下载图像）。虽然，我完全确定，这些图像存在于服务器上。因为，如果尝试更新页面或按 F5，图像会突然出现。因此，可能存在一种情况，即所有图像都已正确下载，而有些情况则未下载。

是否有某种方法可以强制浏览器检查图像是否正确下载，如果没有 - 重新下载？

这是我尝试过的

setTimeout(function(){
$('div[class*="image"]').each(function() {

    var tempHTML = $(this).html();
    tempHTML = tempHTML.replace(/.png/g, '.png?' + new Date().getTime());
    $(this).html(tempHTML);
});
}, 3000);

在某些超时时，它会尝试将当前日期添加到图像的名称（其扩展名）中，有时它会有所帮助，但并非总是如此。

而且我仍然不知道，我该如何检查该图像是否已下载（不是“越界”失败）

标签： javascriptjquery

解决方案

您可以使用 onerror 事件尝试重新加载图像。

<img src="some_image.png" onerror="reloadImage(this);" />

function reloadImage(event) {
    // Refresh the src attribute, which should make the
    // browsers reload the iamge.
    event.src = event.src;
}

即使该事件不是任何标准的一部分，它也适用于自 IE5 以来的所有浏览器。

推荐阅读