浅谈判断图片是否加载完成的方法

最新推荐文章于 2024-07-05 15:22:01 发布

筱葭

最新推荐文章于 2024-07-05 15:22:01 发布

阅读量6.5k

点赞数 1

分类专栏： JavaScript 文章标签：图片加载 onload complete onreadystatechange onerror

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/60883518

版权

JavaScript 专栏收录该内容

89 篇文章 2 订阅

订阅专栏

1、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>

2、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>

3、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>

注意：只有 IE6-IE10支持onreadystatechange事件，其它浏览器不支持。

4、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>

筱葭

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浅谈判断图片是否加载完成的方法

1、onload事件 loading... document.getElementsByTagName("img")[0].onload =function() { document.getElementsByTagName("p")[0].innerHTML ='加载完成！'; } 2、complete属性
复制链接

扫一扫

专栏目录