【前台优化】js图片懒加载及优化

作者 : 开心源码 本文共2157个字,预计阅读时间需要6分钟 发布时间: 2022-05-12 共134人阅读

一、前言

为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB。当页面图片过多的时候,页面加载速度很缓慢,一个页面加载几秒没有完成,客户体验不好,会丧失很多客户的。

所以对于图片过多的页面,可以为了加速页面加载速度,很多时候我们需要将页面内未出现的可视区域内的图片先不加载,等到滚动到可视区的时候录再去加载。这样子对于页面加载性能上会有很大的提升,也就提高了客户体验。

二、原理

1、将页面中的img标签src指向一张小图片或者者src为空,

2、而后定义data-src属性(这个属性可以自己设置命名,我才用data-src)属性指向真实的图片。

3、src指向一张默认的图片,否则当src为空的时候也会像服务器发送一次请求(指向默认的一张图片那就只要要请求一次)。可以指向loading的地址。

4、当载入页面时,先把可视区区域内的img标签的data-src属性值赋值给src。

5、而后监听滚动事件,加载客户即将看到的图片(利用图片出现时距离顶部的高度 < 滚动条距离顶部的高度 + 可视区的高度)。

注意:图片要指定宽高

关于窗口各种宽度,给出网上的好图。

三、图片懒加载的实现代码

<!DOCTYPE html>Documentimg{display: block;margin-bottom:50px;width:800px;height:400px;? ? ? ? }(function(){letnum =document.getElementsByTagName(‘img’).length;letimg =document.getElementsByTagName(“img”);letn =0;//存储图片加载到的位置,避免每次都从第一张图片开始遍历lazyload();//页面载入完毕加载可是区域内的图片window.onscroll = lazyload;functionlazyload(){//监听页面滚动事件letseeHeight =document.documentElement.clientHeight;//可见区域高度letscrollTop =document.documentElement.scrollTop ||document.body.scrollTop;//滚动条距离顶部高度for(leti = n; i

四、使用节流函数进行优化

假如直接将函数绑定在scroll事件上,当页面滚动时,函数会被高频触发,这非常影响浏览器性能。

同时还有以下场景往往因为事件频繁被触发,因此频繁执行dom操作,资源加载等重行为,导致UI停顿甚至浏览器奔溃。

1、window对象的resize,scroll事件;

2、拖拽时的mousemove事件;

3、射击游戏中的mousedown,keydown事件;

4、文字输入,自动完成的keyup事件;

处理这个问题的方法有去防抖和节流的方法:

1、防抖动原理:当调用动作n毫秒后,才会执行,若这n毫秒内又调用此动作则重新计算执行时间。

不足:当我一直滚动鼠标的时候,lazyload函数就会不断被推迟,这样只有停下来的时候才会执行,那么再有些需要及时显示的情况下,就显得不那么友好了

2、节流原理:预设一个执行周期,假如这个周期结束了都还没有触发函数,那就会执行一次函数;假如这个周期还没有结束就触发函数,那定时器将重置,开始新周期。

达到了想要的效果,既没有频繁的执行也没有推迟执行

五、运用节流函数的图片懒加载代码

<!DOCTYPE html>Documentimg{display: block;margin-bottom:50px;width:800px;height:400px;? ? ? ? }(function(){letnum =document.getElementsByTagName(‘img’).length;letimg =document.getElementsByTagName(“img”);letn =0;//存储图片加载到的位置,避免每次都从第一张图片开始遍历lazyload();//页面载入完毕加载可是区域内的图片functionlazyload(){//监听页面滚动事件letseeHeight =document.documentElement.clientHeight;//可见区域高度letscrollTop =document.documentElement.scrollTop ||document.body.scrollTop;//滚动条距离顶部高度for(leti = n; i = time) {? ? ? ? ? ? fun.apply(context, args);? ? ? ? ? ? startTime = curTime;// 没达到触发间隔,重新设定定时器}else{? ? ? ? ? ? timeout = setTimeout(fun, delay);? ? ? ? }? ? };};window.addEventListener(‘scroll’,throttle(lazyload,500,1000));? ? })()

假如有想学习编程的初学者,可来我们的前台直播授课群的哦:571671034里面免费送整套系统的前台教程!

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 【前台优化】js图片懒加载及优化

发表回复