Question

当注入文档的图像已完全加载时，是否可以使用jQuery或纯DOM操作/事件进行检测？例如，脚本需要将一个图像替换为另一个图像。如果它只是更改了src属性，则用户将看到图像短暂消失（或者不是如此简短，取决于它们的连接）。因此，更好的选择是在某个隐藏位置（或者，如果跨平台可能，完全脱离DOM）创建新的图像元素，并仅在新的图像元素准备就绪时切换图像。可以这样做吗？

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

Answer 1

是的，你可以使用.load()事件来做到这一点。

等

$('#img1').load(function(){  alert('loaded'); });

当特定选择器的资源已完全加载时，将显示警报。

Answer 2

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

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

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

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

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

或

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

如果要检查图像是否无法加载，请执行以下操作 - ＆gt;

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

或

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

注意

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

Answer 3

.load（）事件并不总是按预期工作，并且在不同情况下容易失败。为了获得最广泛的浏览器支持，我建议使用DeSandro的imagesLoaded（无论如何我认为这是最佳实践）：https://github.com/desandro/imagesloaded

检测图像何时加载

3 个答案: