懒加载实际上就是通过计算图片的到可视区窗口的距离，如果图片的顶部到可视区窗口的底部的距离小于等于0的话，就生成一个image并设置image.src的属性值，放置到相应的图片位置
从而实现懒加载，即动态的创建image和添加image元素到页面。
预加载：要实现已进入页面就将图片下载，直接在script中创建imgae数组，循环的将图片的地址信息传递给各个image元素的src特性即可
懒加载实现：
<!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">
<style>
ul{
margin-left: 50%;
position: relative;
left: -100px;
width: 200px;
height: 200px;
background-color: gold;
overflow: auto;
list-style: none;
padding: 0px;
}
li{
width: 100px;
height: 100px;
background-color:green;
margin-bottom: 10px;
}
img{
width:100px;
height: 100px;
}
</style>
<title>懒加载</title>
</head>
<body>
<h1>图片懒加载</h1>
<ul>
<li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"><i></i></li>
<li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
<li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"><i></i></li>
<li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
<li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
<li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
<li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
<li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
<li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
<li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
<li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
<li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
<li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
<li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
<li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
<li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
<li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
</ul>
<script>
// 实质就是动态的生成img 让其动态的加载图片，判断是否是在可视区域内
var ul = document.getElementsByTagName("ul")[0];
var lis = document.getElementsByTagName("li");
function check(element){
//判断是否需要将图片加载进来
//https://blog.csdn.net/weixin_40929761/article/details/81061434
//offsetTop距离文档顶端的距离，scrollTop滚过的距离，200 ul的宽度 减去之后就是元素距离ul底部的距离
//小于0就说明进入了
if(element.offsetTop-ul.scrollTop-200<=0){
return true;
}else{
return false;
}
}
document.getElementsByTagName("ul")[0].onscroll = function (){
for(let i=0;i<lis.length;i++){
if(check(lis[i])){
lis[i].style.backgroundColor = "red";
var img = document.createElement("img");
img.src = lis[i].dataset.src;
lis[i].appendChild(img);
}
}
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/panjingshuang/p/11619025.html
时间： 2024-10-07 08:50:57