图片延迟加载

最新推荐文章于 2024-04-24 01:03:46 发布

samfung09

最新推荐文章于 2024-04-24 01:03:46 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript 延迟加载

本文链接：https://blog.csdn.net/samfung09/article/details/80035354

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

原生js简单实现图片延迟加载，话不多说，看代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		div{
			width: 500px;
			min-height: 300px;
			border: 2px red solid;
			background: url("http://c.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0fc534312c34349b74536681fcda39f8/f9198618367adab46005ce688fd4b31c8601e4c0.jpg") no-repeat center center;
		}
		img{
			width: 500px;
		}
	</style>
</head>
<body>
	<div>
		<img src="" alt="" truesrc="创意风景山水船.jpg">
	</div>
	<div>
		<img src="" alt="" truesrc="mmexport1511167490490.jpg">
	</div>
	<div>
		<img src="" alt="" truesrc="创意风景山水船.jpg">
	</div>
	<div>
		<img src="" alt="" truesrc="mmexport1511167490490.jpg">
	</div>
	<div>
		<img src="" alt="" truesrc="创意风景山水船.jpg">
	</div>
</body>
<script>
	var aImg = document.querySelectorAll('img');
	document.onscroll = function(){
		//当前可视区高度加页面滚动高度
		var h = document.body.scrollTop + document.documentElement.clientHeight;
		
		for(var i = 0; i < aImg.length; i++){
			if(aImg[i].isload){	//如果图片标记已加载
				continue;
			}
			//当前图片刚全部出现页面高度
			var imgBottomHeight = aImg[i].offsetTop + aImg[i].parentNode.offsetHeight;
			
			if(h > imgBottomHeight){	//如果当前页面高度大于图片完全出现高度
				var img = new Image();	//创建一个临时img标签，为了防止图片src地址出错造成显示碎片图标
				img.src = aImg[i].getAttribute('truesrc');
				img._index = i;

				img.onload = function(){	//当图片能够正常加载
					//alert(this._index)	注意事件绑定是异步编程
					aImg[this._index].src = this.src;
					aImg[this._index].removeAttribute('truesrc');
					img = null;
					console.log('ok')
				};
				aImg[i].isload = true;	//无论图片地址是否出错，到了该页面高度该图片就标记为已加载
			}
		}
	}
</script>
</html>

效果图：

samfung09

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片延迟加载

原生js简单实现图片延迟加载，话不多说，看代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.
复制链接

扫一扫