对于图片较多的页面,使用懒加载可以大幅提高页面加载速度,提高用户体验。
<强>懒加载的意义(为什么要使用懒加载)
对页面加载速度影响最大的就是图片,一张普通的图片可以达到几米的大小,而代码也许就只有几十KB。当页面图片很多时,页面的加载速度缓慢,几年代钟内页面没有加载完成,也许会失去很多的用户。
所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载,等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。
<强>原理
将页面中的img标签src指向一张小图片或者src为空,然后定义data-src(这个属性可以自定义命的名,我才用data-src)属性指向真实的图片.src指向一张默认的图片,否则当src为空时也会向服务器发送一次请求。可以指向加载的地址。
注:图片要指定宽高
<代码> & lt; img src=" https://www.yisu.com/zixun/default.jpg " data-src=" http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg "/祝辞
当载入页面时,先把可视区域内的img标签的data-src属性值负给src,然后监听滚动事件,把用户即将看到的图片加载。这样便实现了懒加载。
<强>代码
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt; style>
img {
显示:块;
margin-bottom: 50 px;
宽度:400 px;
身高:400 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; img src=" https://www.yisu.com/zixun/default.jpg " data-src=" http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg " alt="比;
& lt; img src=" https://www.yisu.com/zixun/default.jpg " data-src=" http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg " alt="比;
& lt; img src=" https://www.yisu.com/zixun/default.jpg " data-src=" http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg " alt="比;
& lt; img src=" https://www.yisu.com/zixun/default.jpg " data-src=" http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg " alt="比;
& lt; img src=" https://www.yisu.com/zixun/default.jpg " data-src=" http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg " alt="比;
& lt; img src=" https://www.yisu.com/zixun/default.jpg " data-src=" http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg " alt="比;
& lt; img src=" https://www.yisu.com/zixun/default.jpg " data-src=" http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg " alt="比;
& lt; img src=" https://www.yisu.com/zixun/default.jpg " data-src=" http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg " alt="比;
& lt; img src=" https://www.yisu.com/zixun/default.jpg " data-src=" http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg " alt="比;
& lt; img src=" https://www.yisu.com/zixun/default.jpg " data-src=" http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg " alt="比;
& lt; img src=" https://www.yisu.com/zixun/default.jpg " data-src=" http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg " alt="比;
& lt;/body>
JavaScript
& lt; script>
var num=document.getElementsByTagName (img) . length;
var img=document.getElementsByTagName (img);
var n=0;//存储图片加载到的位置,避免每次都从第一张图片开始遍历
lazyload ();//页面载入完毕加载可是区域内的图片
窗口。onscroll=lazyload;
lazyload()函数{//监听页面滚动事件
var seeHeight=document.documentElement.clientHeight;//可见区域高度
var scrollTop=document.documentElement。scrollTop | | document.body.scrollTop;//滚动条距离顶部高度
我对(var=n;我& lt;num;我+ +){
如果(img[我]。offsetTop & lt;seeHeight + scrollTop) {
如果(img[我].getAttribute (" src ")==癲efault.jpg”) {
img[我]。src=https://www.yisu.com/zixun/img[我].getAttribute (“data-src”);
}
n=i + 1;
}
}
}
& lt;/script>
jQuery
& lt; script>
var n=0,
imgNum=$ (img) . length,
img=$ (img);
lazyload ();
$(窗口).scroll (lazyload);
函数lazyload(事件){
我对(var=n;我& lt;imgNum;我+ +){
如果(img.eq (i) .offset ()。顶级& lt;方法($(窗口).height()) +方法($(窗口).scrollTop ())) {
如果(img.eq (i) .attr (" src ")==癲efault.jpg”) {
var src=https://www.yisu.com/zixun/img.eq(我).attr (“data-src”);
img.eq(我)。attr (" src " src);
n=i + 1;
}
}
}
}
& lt;/script>
