懒加载

什么是懒加载

懒加载也就是延迟加载; 当访问一个页面时,先将img标签中的src链接设为同一张图片(这样就只需请求一次,俗称占位图), 将其真正的图片地址存储在img标签的自定义属性中(比如data-src); 当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果; 这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢页面卡顿或崩溃等问题

为什么要使用懒加载

懒加载对于图片较多页面很长的业务场景很适用,可以减少无效资源的加载

懒加载的实现步骤

1. 首先,不要将图片地址放到src属性中,而是放到其它属性(data-src)中

2. 页面加载完成后,根据scrollTop判断图片是否在用户的视野内, 如果在,则将data-original属性中的值取出存放到src属性中

3. 在滚动事件中重复判断图片是否进入视野; 如果进入,则将data-original属性中的值取出存放到src属性中

代码实现

既然懒加载的原理是基于判断元素是否出现在窗口可视范围内, 首先我们写一个函数判断元素是否出现在可视范围内:
 

<script>
function isVisible($node){
var winH = $(window).height(),
scrollTop = $(window).scrollTop(),
offSetTop = $(window).offSet().top;
if (offSetTop < winH + scrollTop) {
return true;
} else {
return false;
}
}
</script>

再添加上浏览器的事件监听函数,让浏览器每次滚动就检查元素是否出现在窗口可视范围内:

<script>
$(window).on("scroll", function{
if (isVisible($node)){
console.log(true);
}
})
</script>

现在我们要做的是,让元素只在第一次被检查到时打印true,之后就不再打印了

<script>
var hasShowed = false;
$(window).on("sroll",function{
if (hasShowed) {
return;
} else {
if (isVisible($node)) {
hasShowed = !hasShowed;
console.log(true);
}
}
})
</script>

这样我们就实现了懒加载

利用懒加载和AJAX,我们还可以实现无限滚动查看时间线/ 在滚动页面一段距离后出现回到顶部按钮的效果

懒加载的优点

显著的提高页面加载速度,又不下载多余的资源节省了流量; 同时更少的图片并发请求数也可以减轻服务器的压力

懒加载插件

关于图片延时加载,网上有很多应用的例子以及插件; 目前研究过的两个插件分别是jquery插件lazyload.js和原生js插件echo.js; 二者的区别不用说,jquery插件使用的时候必须引入jquery才可以,且该插件功能强大,灵活性也高; 而echo.js是用原生写的插件,代码少,不依赖其他库,拿起来就可以用, 但能够实现的效果不如lazyload丰富强大,但基本的延时加载要求都能满足

Tags：

很赞哦！ ()