一、懒加载实现的原理
用一句话来说: 懒加载就是延迟加载是优化页面效果的一种手段,即通过控制图片内的src属性的现实或隐藏来实现的!
如图:
总的来说就是:当图片距离顶部的距离top-height等于可视区域h和滚动区域高度s之和时说明图片马上就要进入可视区了,就是说当top-height<=s+h时,图片在可视区是使片加载。
二、实现代码
实现懒加载有四个步骤,如下:
1.加载loading图片
2.判断哪些图片要加载【重点】
3.隐形加载图片
4.替换真图片
- html
<!DOCTYPE html>
<html>
<head>
<title>Demo-Lazyload</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<style>
img {
height: 500px;
width: 500px;
display: block;
background: url(images/loading.gif) no-repeat center;
margin: 0 auto
}
#lazy {
width: 800px;
margin: 0 auto
}
.box{
position: relative;
}
</style>
</head>
<body>
<div id="lazy">
<img data-src="images/1.jpg" src="images/pixel.gif" />
<img data-src="images/2.jpg" src="images/pixel.gif" />
<img data-src="images/3.jpg" src="images/pixel.gif" />
<img data-src="images/4.jpg" src="images/pixel.gif" />
<img data-src="images/5.png" src="images/pixel.gif" />
<img data-src="images/6.jpg" src="images/pixel.gif" />
<!--<img data-src="真实图片地址" src="小图片地址"/>
<img data-src="真实图片地址" src="小图片地址"/>-->
</div>
<script src="js/lazyload.js"></script>
<script type="text/javascript">
var lazyloading = lazyload({
id: "lazy",
lazyTime: 100,
lazyRange: 100
});
// let div = document.querySelector("#div")
// console.log(div.offsetParent)
</script>
</body>
</html>
- js
function lazyload(options) {
var doc = options.id ? document.getElementById(options.id) : document;
if (doc === null) return;
var tmp = doc.getElementsByTagName('img'),
tmplen = tmp.length,
imgobj = [];
for (var i = 0; i < tmplen; i++) {
var _tmpobj = tmp[i];
if (_tmpobj.getAttribute('data-src') !== null) {
if (isLoad(_tmpobj)) {
setimg(_tmpobj);
} else {
imgobj.push(_tmpobj);
}
}
var len = imgobj.length;
function handler() {
for (var i = 0,end = len; i < end; i++) {
var obj = imgobj[i];
if (isLoad(obj)) {
_setimg(obj);
imgobj.splice(i, 1);
len--;
if (len === 0) {
loadstop()
}
}
}
}
function isLoad(ele) {
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
if (typeof ele === 'undefined') return false;
var edit = ~~ele.getAttribute("data-range") || options.lazyRange;
var clientHeight = scrollTop + document.documentElement.clientHeight + edit;
var offsetTop = 0;
while (ele.tagName.toUpperCase() !== 'BODY') {
offsetTop += ele.offsetTop;
ele = ele.offsetParent;
//重点在这儿,这是累加的操作,若是图片存在定位,则累加offsetTop(图片到顶部的距离)
}
return (clientHeight > offsetTop);
}
function _setimg(ele) {
if (options.lazyTime) {
setTimeout(function () {
setimg(ele);
},
options.lazyTime + ~~ele.getAttribute('data-time'))
} else {
setimg(ele);
}
}
function setimg(ele) {
console.log(ele.src)
ele.src = ele.getAttribute('data-src');
}
function loadstop() {
// 删除使用 EventTarget.addEventListener() 方法添加的事件。
window.removeEventListener ? window.removeEventListener("scroll", handler, false) : window.detachEvent("onscroll", handler);
}
loadstop();
window.addEventListener ? window.addEventListener("scroll", handler, false) : window.attachEvent("onscroll", handler);
} }