懒加载

最新推荐文章于 2023-02-28 14:54:26 发布

aldsong123

最新推荐文章于 2023-02-28 14:54:26 发布

阅读量185

点赞数

分类专栏：前端文章标签：懒加载网页图片加载 jq懒加载

本文链接：https://blog.csdn.net/aldsong123/article/details/79176827

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

懒加载，当一个网站有很多的图片要显示时，如果我们并没有浏览完整个网页或则不想继续浏览完整个网站信息，而页面却会加载整个网站的图片，如果图片非常多的话，一：加载速度会很慢。二：浪费网站流量资源。那么这时就要用到懒加载了。它可以让浏览器只加载我们可视区域内的图片。

思想就是：把要加载的图片路径事先放到一个div标签的一个属性里，这里自定义了一个属性：date-img。当鼠标滚轮上下滑动时，判断当前div相对于浏览器是否在可视区域内，如果在可视区域内，就把div里存放图片地址属性的路径用jq方法赋值给img标签的 src属性里，实现图片加载。未完……

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript"src="js/jquery.min.js"> //引入一个jq文件库（可以都网上下载）
		</script>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			div{
				width: 400px;
				height: 400px;
				background: yellow;
				float: left;
				margin-left:20px ;
				margin-top: 20px;
			}
			div img{
				width: 400px;
				height: 400px;
			}
		</style>
//此处可以存放下面的jq代码块	 				 					 
 	</head>
	<body> 
		 <div date-img="img/01.jpg"><img src="" alt="" /></div>
		<div date-img="img/02.jpg"><img src="" alt="" /></div>
		<div date-img="img/03.jpg"><img src="" alt="" /></div>
		<div date-img="img/04.jpg"><img src="" alt="" /></div>
		//观客可以自行添加继续添加上面的标签，要加载的图片越多，效果越可看。 
		 		 
		 
 
	</body>
</html>

jq代码块

<script type="text/javascript">
   $(function(){
	var winH = $(window).height(); //获得浏览器的高度
	  $(document).scroll(function(){  //添加滚动条事件，触发loading函数。
		loading()
	})
	function loading(){
		var sTop = $(document).scrollTop() //获得滚动条高度
		$('div').each(function(){
			var Dtop = $(this).offset().top; //获得当前的div距离顶部的位置
			var dH = $(this).outerHeight() //获得当前元素的实际高度
			//判断当前元素是否在可视区范围之内
			if(Dtop>=sTop&&Dtop<=sTop+winH||Dtop+ dH >=sTop&&Dtop+dH<=sTop+winH){
				//获得当前div属性
				var src = $(this).attr('date-img');
				$(this).find('img').attr('src',src);
			}
		})
	}
	})
</script>

示意图

aldsong123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
懒加载

懒加载，当一个网站有很多的图片要显示时，如果我们并没有浏览完整个网页或则不想继续浏览完整个网站信息，而页面却会加载整个网站的图片，如果图片非常多的话，一：加载速度会很慢。二：浪费网站流量资源。那么这时就要用到懒加载了。它可以让浏览器只加载我们可视区域内的图片。思想就是：把要加载的图片路径事先放到一个div标签的一个属性里，这里自定义了一个属性：date-img。当鼠标滚轮上下滑动时，判断当前
复制链接

扫一扫