懒加载原理:
当我们的图片进入可视区域,去请求资源。
需要去监听scroll事件,在scroll事件的回调中,去判断我们的懒加载的图片是否进入可视区域。
根据原理,我们推断出。
1.我们需要整个可视区域的高度。
2.当前图片的top值
3.当top值小于可视区域高度时,那么这个时候,我们就可以判断这个图片已经进入可视区域了。
如图,将图片资源放置在data-original属性上,src实际上都是""的,也就是说,这些图片其实是没有去请求任何图片资源的。
然后,我们要做的就是,当图片进入可视区域之后,将data-original中的图片资源放置到src中
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>懒加载</title>
<style>
.image-item {
width: 40%;
height: 400px;
background: grey;
margin-right: 5%;
display: inline-block;
}
.image-list {
margin-left: 5%;
}
</style>
</head>
<body>
<ul class="lazyImageList" id="lazyImageList">
<li>
<img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
<img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
<img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
<img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
<img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
<img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
<img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
<img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
<img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
<img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
<img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
<img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
<img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
<img src="" class="image-item" lazyload="true" data-original="http://www.kinnsoft.com:9520/file/preview?keyid=c0c06b42-af43-4c24-8d0b-63846c819b9f">
</li>
</ul>
<script>
//获取可是区域的高度
var viewHeight = document.documentElement.clientHeight;
/*
*定义lazyload方法,这个方法会获取所有标记的lazyload的所有的img的图片
这些图片在我们scroll事件中监听。当我们页面一滑动,这个时候它就会去遍历我的所有的lazyload的所有的图片
然后判断这些图片的顶部距离可视区域的位置,是否小于可视区域的高度
*/
function lazyload() {
var eles = document.querySelectorAll("img[data-original][lazyload]");
Array.prototype.forEach.call(eles, function(item, index) {
if (item.dataset.original == "")
return;
var rect = item.getBoundingClientRect(); //这个元素相对于左上角的位置
console.log(rect.bottom + ":" + rect.top);
if (rect.bottom >= 0 && rect.top < viewHeight) {
//当元素顶部小于可视高度时,请求图片资源
! function() {
var img = new Image();
img.src = item.dataset.original;
img.onload = function() {
item.src = img.src;
}
item.removeAttribute('data-original');
item.removeAttribute('lazyload');
}()
}
})
}
lazyload(); //首屏
document.addEventListener("scroll", lazyload);
</script>
</body>
</html>