一.图片懒加载的原因
像一些图片非常多的网站,例如淘宝,京东等。会造成服务器的压力,为提高新能及用户体验感,懒加载是一个非常不错的选择。
二.图片懒加载的原理
是通过<img /> 标签里面的src发请求的,所以我们可以通过h5新增的自定义属性,把图片给自定义属性,等图片到可视区域的时候,把图片给src属性。
三.图片懒加载的实现
html部分
<div class="box">
<!-- src里面是一张伪加载图片, data-src里面存的是一个真图片 -->
<img src="./img/loading.gif" alt="1" class="lazy-load" data-src="./img/dusk.jpeg">
<img src="./img/loading.gif" alt="2" class="lazy-load" data-src="./img/sea.jpeg">
<img src="./img/loading.gif" alt="3" class="lazy-load" data-src="./img/shu.jpeg">
<img src="./img/loading.gif" alt="4" class="lazy-load" data-src="./img/sky.jpeg">
<img src="./img/loading.gif" alt="5" class="lazy-load" data-src="./img/starrysky.jpeg">
<img src="./img/loading.gif" alt="6" class="lazy-load" data-src="./img/向日葵.jpeg">
</div>
js部分
<script type="text/javascript">
// onload是等所有的资源文件加载完毕以后再绑定事件
window.onload = function () {
// 获取图片列表,即img标签列表
var imgs = document.querySelectorAll('img');
// 获取到浏览器顶部的距离
function getTop(e) {
return e.offsetTop;
}
// 懒加载实现
function lazyload(imgs) {
// 可视区域高度
var h = window.innerHeight;
//滚动区域高度
var s = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < imgs.length; i++) {
//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
if ((h + s) > getTop(imgs[i])) {
// 真实情况是页面开始有2秒空白,所以使用setTimeout定时2s
(function (i) {
setTimeout(function () {
// 不加立即执行函数i会等于9
// 隐形加载图片或其他资源,
//创建一个临时图片,这个图片在内存中不会到页面上去。实现隐形加载
var temp = new Image();
temp.src = imgs[i].getAttribute('data-src');//只会请求一次
// onload判断图片加载完毕,真是图片加载完毕,再赋值给dom节点
temp.onload = function () {
// 获取自定义属性data-src,用真图片替换假图片
imgs[i].src = imgs[i].getAttribute('data-src')
}
}, 2000)
})(i)
}
}
}
lazyload(imgs);
// 滚屏函数
window.onscroll = function () {
lazyload(imgs);
}
}
</script>