学习懒加载
一、为什么需要懒加载?
- 对于图片过多的使用场景,为了提高页面加载速度,改善用户体验,我们对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载。
二、懒加载的实现原理
- 它的实现原理很简单,先把img的src指向一个小图片,图片真实的地址存储在img一个自定义的属性里,
<img src='lazy-load.png' data-src='xxx'/>
,等到此图片出现在视野范围内了,获取img元素,把data-src里的值赋给src。
三、实现懒加载必备的知识点
(一)获取窗口、窗口滚动和元素距离窗口顶部的偏移高度,计算元素是否出现在窗口可视范围内;
1 2 3 4 5 6 7 8 9 10
| function isShow($e){ var winH = $(window).height(), scrollH = $(window).scrollTop(), top = $e.offset().top; if(top < scrollH + winH){ return true; } else { return false; } }
|
(二)监听窗口滚动事件,检查元素是否在可视范围内;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| $(window).on('scroll', function(){ checkShow(); }) checkShow(); function checkShow(){ $('img').each(function(){ var $cur = $(this); if(!!isloaded($cur)){return;} if (isShow($cur)) { setTimeout(function(){ showImg($cur); },300) }; }); }
|
(三)元素显示的时候把之前的默认照片替换成data-src里的照片。
1 2 3 4
| function showImg($e) { $e.attr('src',$e.attr('data-src')); $cur.data('isloaded',true); }
|