img的complete跟onload（可有人懂最后的问题彩蛋）

最新推荐文章于 2023-03-15 11:00:29 发布

原创最新推荐文章于 2023-03-15 11:00:29 发布 · 7.6k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文通过实际测试案例探讨了在JavaScript中onload与complete事件的区别。onload事件会在图片完全加载后触发，而complete属性则表示图片是否已加载完毕，无论成功与否。文章通过调整代码顺序展示了不同情况下两个事件的行为差异。

在图片预加载编码的时候看到onload跟complete，思考，onload跟complete有什么区别？测试在chrome环境下。

动手实践，编了一小段简单的测试代码

document.getElementById('load').onclick = function() {
    var img = new Image();
    img.src="images/1-logo.png";
    if(img.complete) {
        console.log('dd');
    }
    img.onload = function() {
        console.log('ff')
    }
}

可以看到，第一次的时候，仅执行了onload，也就是我们看到的仅打印了‘ff'文字，而接下来的每次点击都会出现“dd”,"ff"，这是为什么呢？继续测试，改变位置：

document.getElementById('load').onclick = function() {
    var img = new Image();
    if(img.complete) {
        console.log('dd');
    }
    img.onload = function() {
        console.log('ff')
    }
    img.src="";
    
}

点击仅显示dd；

document.getElementById('load').onclick = function() {
    var img = new Image();
    if(img.complete) {
        console.log('dd');
    }
    img.onload = function() {
        console.log('ff')
    }
    img.src="images/1-logo.png";

}