实现图片懒加载

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

Spider_man_

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

阅读量371

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/chengmo123/article/details/109278829

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.原理

大家都知道，一张图片就是一个<img>标签，而图片的来源主要是src属性。浏览器是否发起亲求就是根据是否有src属性决定的。

既然这样，那么我们就要对<img>标签的src属性下手了，在没进入可视区域的时候，我们先不给这个<img>标签赋src属性，这样岂不是浏览器就不会发送请求了。

总结：我们知道了从<img>标签下手，那么更重要的就是可视区域的判断了

2.实现

参考https://blog.csdn.net/w1418899532/article/details/90515969

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script type="text/javascript">
			
			function getTop(img){
				// 获取图片当前的高度
				return img.offsetTop
			}
			
			
			function lazyload(images){
				// 获得可视区域的高度
				var H = document.documentElement.clientHeight
				// 获取右边滑块高度
				var S = document.documentElement.scrollTop || document.body.scrollTop
				//如果当前图片在浏览器的高度小于 H+S则加载
				// console.log(S+H)
				for(var i=0; i<images.length; i++){
					//使用闭包使其2秒后执行
					setTimeout((function(i){
						return function(){
							if(H + S > getTop(images[i])){
								images[i].src=images[i].getAttribute('data-src')
							}
						}
					})(i),200)
					
				}
				
				// console.log(H)
			}
			
			var images = document.getElementsByTagName('img')
			window.onload = window.onscroll = function(){
				lazyload(images)
			}
		</script>
	</head>
	<body>
		<div >
			 <div class="container">
			        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
			            data-src="http://img1.imgtn.bdimg.com/it/u=3990342075,2367006974&fm=200&gp=0.jpg">
			        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
			            data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg">
			        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
			            data-src="http://img4.imgtn.bdimg.com/it/u=1878067600,3935137756&fm=200&gp=0.jpg">
			        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
			            data-src="http://img2.imgtn.bdimg.com/it/u=3844233833,3942617167&fm=200&gp=0.jpg">
			        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
			            data-src="http://img3.imgtn.bdimg.com/it/u=346230831,1833217134&fm=200&gp=0.jpg">
			        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
			            data-src="https://p3.ssl.qhimgs1.com/sdr/400__/t01678fb48c7fc2de99.jpg">
			        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
			            data-src="https://p0.ssl.qhimgs1.com/sdr/400__/t01ad9a266ccb869064.jpg">
			        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
			            data-src="https://p3.ssl.qhimgs1.com/sdr/400__/t013e365ee605a216e9.jpg">
			        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
			            data-src="https://p3.ssl.qhimgs1.com/sdr/400__/t01d32b580344adff93.jpg">
			        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
			            data-src="https://p5.ssl.qhimgs1.com/sdr/400__/t01c301b9d7753c1c4f.jpg">
			        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
			            data-src="https://p2.ssl.qhimgs1.com/sdr/400__/t01d7df0764e1cf0e02.jpg">
			        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
			            data-src="https://p3.ssl.qhimgs1.com/sdr/400__/t01c4d2f812116f7e8d.jpg">
			        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
			            data-src="https://p0.ssl.qhimgs1.com/sdr/400__/t01d414d58f43519826.jpg">
			        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
			            data-src="https://p1.ssl.qhimgs1.com/sdr/400__/t010cb2a916e4dd2d2b.jpg">        
		</div>
	</body>
</html>

3.代码用到的知识

常见的几种边距

document.documentElement.clientHeight//获取屏幕可视区域的高度

element.offsetTop//获取元素相对于文档顶部的高度

MDN解释：offsetTop，返回当前元素相对于其offsetParent元素的顶部距离

document.documentElement.scrollTop//获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离

一个元素的scrolltop值是这个元素的顶部到视口可见内容的距离的度量，当一个元素的内容没有产生垂直方向的滚动条，那么他的scrollTop值为0

在这里插入图片描述

Spider_man_

关注

0
点赞
踩
1

收藏

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

1.原理大家都知道，一张图片就是一个<img>标签，而图片的来源主要是src属性。浏览器是否发起亲求就是根据是否有src属性决定的。既然这样，那么我们就要对<img>标签的src属性下手了，在没进入可视区域的时候，我们先不给这个<img>标签赋src属性，这样岂不是浏览器就不会发送请求了。总结：我们知道了从<img>标签下手，那么更重要的就是可视区域的判断了2.实现参考https://blog.csdn.net/w1418899532/ar
复制链接

扫一扫

专栏目录