Lazy loading actually calculating the distance to the visible region of the image window, if the distance to the top of the picture of the bottom of the viewable area of the window is less than 0, then image and generates a set of attribute values image.src, placed the position of the corresponding picture
In order to achieve lazy loading, that create dynamic image and image elements added to the page.
Preloading: To implement has entered the picture will download the page, create imgae arrays directly in the script, the delivery cycle of pictures of address information to the src attribute of each image element can be
Lazy loading implementation:
<!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> varessence generate dynamic image img allowed to dynamically load, determines whether the visible area//
<Script>
</ UL>
UL = document.getElementsByTagName ( "UL") [0 ];
var LIS = document.getElementsByTagName ( "Li" );
function Check ( Element) {
// determine whether the image is loaded to come
// https://blog.csdn.net/weixin_40929761/article/details/81061434
// distance from the top of offsetTop documents from scrollTop rolled over, 200 ul of width after subtracting element distance is the distance of the bottom ul
// smaller than 0 it means into
IF (element.offsetTop-ul.scrollTop-200 is <= 0 ) {
return to true ;
} the else {
return to 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>