JavaScript 懒加载图片

最新推荐文章于 2024-05-30 17:38:42 发布

谢泽豪

最新推荐文章于 2024-05-30 17:38:42 发布

阅读量302

点赞数 1

分类专栏： web前端的笔记

本文链接：https://blog.csdn.net/qq_19306197/article/details/77601484

版权

web前端的笔记专栏收录该内容

37 篇文章 2 订阅

订阅专栏

1.什么是懒加载

当图片出现在可视区域时才加载图片。

2.懒加载实现方式

核心：可视区域(clientHeight)+滚动条距离顶部高度(scrollTop) > 元素到顶部距离(offsetTop)

0.获取元素到顶部的距离(offsetTop)

1.监听滚动

2.在滚动方法里，实时获取可视区域(clientHeight) 和滚动条距离顶部高度(scrollTop)

3.对单个img进行懒加载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0px;
			}
		</style>
	</head>
	<body>
		<div style="width: 100px;height: 100px;margin-top: 1200px;">
			<img data-src="img01.png" width="100px" height="100px" style="margin-top: 1200px;" id="img01"/>
		</div>
		
		<script type="text/javascript">
			var img01=document.getElementById('img01');
			
			window.οnscrοll=function () {
				//元素距离顶部的高度
				var oHeight=img01.offsetTop;
				//可视区域
				var height=document.documentElement.clientHeight;
				//滚动条距离顶部高度
				var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
				if (height+scrollTop>oHeight) {
					img01.src=img01.getAttribute("data-src");
				}
			}
		</script>
	</body>
</html>

4.对多个标签进行懒加载

在需要懒加载的img标签的class属性添加上“lazyLoad”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0px;
			}
		</style>
	</head>
	<body>
		<div style="width: 100px;height: 100px;margin-top: 100px;">
			<img data-src="img01.png" width="100px" height="100px" style="margin-top: 1px;" class="lazyLoad"/>
		</div>
		<div style="width: 100px;height: 100px;margin-top: 300px;">
			<img data-src="img01.png" width="100px" height="100px" style="margin-top: 1px;" class="lazyLoad"/>
		</div>
		<div style="width: 100px;height: 100px;margin-top: 300px;">
			<img data-src="img01.png" width="100px" height="100px" style="margin-top: 1px;" class="lazyLoad"/>
		</div>
		<div style="width: 100px;height: 100px;margin-top: 300px;">
			<img data-src="img01.png" width="100px" height="100px" style="margin-top: 1px;" class="lazyLoad"/>
		</div>
		
		<script type="text/javascript">
			var imgArray=document.getElementsByClassName("lazyLoad");
			var len=imgArray.length;
			
			for (var i = 0; i < len; i++) {
				var oHeight=imgArray[i].offsetTop;
				//可视区域
				var height=document.documentElement.clientHeight;
				if (oHeight<height) {
					imgArray[i].src=imgArray[i].getAttribute("data-src");
				}
			}
			
			window.οnscrοll=function(){
				for (var i = 0; i < len; i++) {
					var oHeight=imgArray[i].offsetTop;
					//可视区域
					var height=document.documentElement.clientHeight;
					//滚动条距离顶部高度
					var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
					if (height+scrollTop>oHeight) {
						if (imgArray[i].src=="") {
							imgArray[i].src=imgArray[i].getAttribute("data-src");
						}
					}
				}
			};
		</script>
	</body>
</html>

谢泽豪

关注

1
点赞
踩
2

收藏

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

1.什么是懒加载当图片出现在可视区域时才加载图片。2.懒加载实现方式核心：可视区域(clientHeight)+滚动条距离顶部高度(scrollTop) > 元素到顶部距离(offsetTop)0.获取元素到顶部的距离(offsetTop)1.监听滚动2.在滚动方法里，实时获取可视区域(clientHeight) 和滚动条距离顶部高度(scrollTop)3.对单个i
复制链接

扫一扫