JavaScript判断图片加载完成的四种方法详解
本文详细解析JavaScript中判断图片加载完成的四种主要方法。通过onload事件、轮询检查complete属性、IE特有的onreadystatechange事件以及处理错误的onerror事件，开发者可根据浏览器兼容性选择合适方案，并解决图片不存在导致的循环报错问题。
JavaScript判断图片加载完成的四种方法详解
本文介绍了几种在JavaScript中判断图片是否加载完成的技术方案，供开发者参考。
利用onload事件
第一种方法：利用onload事件
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<img src="images/background.png">
<p>loading...</p>
<script type="text/javascript">
document.getElementsByTagName("img")[0].onload =function() {
document.getElementsByTagName("p")[0].innerHTML ='加载完成！';
}
</script>
</body>
</html>
检查complete属性
第二种方法：检查complete属性
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<img src="images/background.png">
<p>loading...</p>
<script type="text/javascript">
function imgLoad(img, callback) {
var timer = setInterval(function() {
if (img.complete) {
callback(img);
clearInterval(timer);
}
}, 50);
}
imgLoad(document.getElementsByTagName("img")[0], function() {
document.getElementsByTagName("p")[0].innerHTML = '加载完成！';
})
</script>
</body>
</html>
监听onreadystatechange事件
第三种方法：监听onreadystatechange事件
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<img src="images/background.png">
<p>loading...</p>
<script type="text/javascript">
document.getElementsByTagName("img")[0].onreadystatechange = function() {
if (this.readyState=="complete" || this.readyState=="loaded")
document.getElementsByTagName("p")[0].innerHTML = '加载完成';
}
</script>
</body>
</html>
需要注意的是，onreadystatechange事件仅IE6至IE10浏览器支持，其他现代浏览器并不支持该事件。
处理onerror事件及循环问题
第四种方法：处理onerror事件
当网络连接状况不佳或图片资源不存在时，均可能触发onerror事件。
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<img src="images/notExistImg.png">
<p>loading...</p>
<script type="text/javascript">
document.getElementsByTagName("img")[0].onload =function() {
document.getElementsByTagName("p")[0].innerHTML ='加载完成！';
}
document.getElementsByTagName("img")[0].onerror =function() {
document.getElementsByTagName("img")[0].src = "images/background.png";
}
</script>
</body>
</html>
在触发onerror事件后，代码通常会为img元素指定一个新的图片源。
潜在问题：
如果新指定的图片存在，则正常显示；但若新图片同样不存在，则会再次触发onerror事件，从而导致页面出现循环跳动或无限加载的问题。
解决方案：
通过将onerror事件处理程序置为null，可以有效防止页面出现循环跳动的现象。
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<img src="images/notExistImg.png">
<p>loading...</p>
<script type="text/javascript">
document.getElementsByTagName("img")[0].onload =function() {
document.getElementsByTagName("p")[0].innerHTML ='加载完成！';
}
document.getElementsByTagName("img")[0].onerror =function() {
document.getElementsByTagName("img")[0].src = "images/backgeound.png";
document.getElementsByTagName("img")[0].onerror = null;
document.getElementsByTagName("p")[0].innerHTML ='加载失败！';
}
</script>
</body>
</html>
如果您对JavaScript的其他技巧感兴趣，建议查阅本站相关专题，包括《JavaScript图片操作技巧大全》、《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》以及《JavaScript数学运算用法总结》。
希望上述关于JavaScript程序设计的介绍能为您提供帮助。
网页开发三者分工：HTML结构、CSS样式与JavaScript交互怎么协作
2026-11-05 12:51:22
JS解析URL参数时怎么处理中文乱码和特殊字符
2026-11-05 12:47:23
js-cookie 存储 JSON 对象：自动序列化与反序列化技巧
2026-11-05 12:36:26
marked.js 快速上手：安装与基础 Markdown 转 HTML 示例
2026-11-05 09:32:53
Phaser.js 与 PixiJS、Cocos Creator 的技术选型对比
2026-11-05 08:36:30