javascript - 检测图像何时加载

Question

是否可以使用 jQuery 或纯 DOM 操作/事件来检测注入(inject)到文档中的图像何时已完全加载？例如，脚本需要将一张图像替换为另一张图像。如果它只是更改 src 属性，用户将看到图像短暂消失(或不那么短暂，具体取决于他们的连接)。因此，更好的选择是在某个隐藏位置创建一个新的图像元素(或者，如果跨平台可能，完全在 DOM 之外)，并仅在新图像准备就绪时才切换图像。这可以吗？

编辑:这可能是一个单独的问题，但仍然......是否还有一种方法可以检测图像何时加载失败？

Answer 1

您可以使用image.onload = function(){<...>} ;

图像是您想要加载的实际图像。

<img src='...' id='image'>

为了检查图像是否完成加载，请执行以下操作->

document.getElementById('image').onload = function(){<...>} 

或

document.getElementById('image').addEventListener('load',function(){<...>},false);

如果您想检查图像是否加载失败，请执行此操作->

document.getElementById('image').onerror = function(){<...>} 

或

document.getElementById('image').addEventListener('error',function(){<...>},false);

注意

.addEventListener该方法在 IE8 中不起作用。如果您打算支持它，我可以编辑我的答案。