在网页开发过程中，常常需要知道图片何时加载完成，以便进行后续操作。本文将介绍一种标准且简洁的方法，通过JavaScript检测图片加载完成并执行回调函数。
方法概述
我们可以使用图片对象的.complete属性和load事件来实现这一功能。.complete属性用于判断图片是否已经加载完成，而load事件则在图片加载完成时触发。
实现步骤
- 获取图片元素
- 定义加载完成的回调函数
- 检查图片是否已经加载
- 根据加载状态执行相应操作
代码示例
以下是具体实现代码：
// 获取图片元素
var img = document.querySelector('img');
// 定义图片加载完成后的回调函数
function loaded() {
alert('图片已加载');
}
// 检查图片是否已经加载完成
if (img.complete) {
// 如果图片已经加载完成，直接执行回调函数
loaded();
} else {
// 如果图片还没有加载完成，添加事件监听器
img.addEventListener('load', loaded);
img.addEventListener('error', function() {
alert('图片加载出错');
});
}
解释
-
获取图片元素：我们使用
document.querySelector方法获取网页中的图片元素。 -
定义回调函数：在
loaded函数中，我们定义了图片加载完成后要执行的操作。在这里，简单地弹出一个提示框。 -
检查图片加载状态：通过检查
img.complete属性，判断图片是否已经加载完成。如果img.complete为true，则立即执行回调函数loaded。 -
添加事件监听器：如果
img.complete为false，则表示图片还未加载完成。这时，我们通过addEventListener方法为图片添加load和error事件监听器，分别处理加载完成和加载出错的情况。
注意事项
- 事件监听器顺序：必须确保在检查
img.complete属性之后，再添加事件监听器，以防止在检查和监听之间图片加载完成导致回调函数被调用两次。 - 兼容性：此方法是标准的JavaScript实现，无需依赖任何第三方库，且在现代浏览器中均可正常工作。