0


JavaScript实现懒加载

文章目录


前言

   身为开发人员的我们进行项目开发时,不仅仅要对页面进行设计,而且还要考虑项目上线后是否能进行
性能优化

,从而达到减轻对

服务器

的负载,让用户拥有一个友好的项目体验感。常见的

项目性能优化

方式有很多。例如:

减少HTTP请求,减少DNS查询,避免重定向,图片懒加载

等。接下来,为大家介绍项目性能优化之一 —

图片懒加载。

一、懒加载是什么?

   懒加载也叫 延迟加载,按需加载。指的是在长网页中延迟加载图片数据,是一种较好的网页
性能优化

的方式。在比较长的网页或应用中,如果图片很多,所有的图片都被加载出来,而用户只能看到可视窗口的那一部分图片数据,这样就浪费了性能。
如果使用图片的

懒加载

就可以解决以上问题。在滚动屏幕之前,可视化区域之外的图片不会进行加载,在滚动屏幕时才加载。这样使得网页的加载速度更快,减少了服务器的负载。懒加载适用于图片较多,页面列表较长(长列表)的场景中。
原文链接:点击跳转

二、懒加载的特点。

  • 减少无用资源的加载:使用懒加载明显减少了服务器的压力和流量,同时也减小了浏览器的负担和服务器的负载。
  • 提升用户体验: 如果同时加载较多图片,可能需要等待的时间较长,这样影响了用户体验,而使用懒加载就能大大的提高用户体验。
  • 防止加载过多图片而影响其他资源文件的加载 :会影响网站应用的正常使用。

三、懒加载的实现原理。

  • 首先准备需要的img标签。图片(注意:此处包含了未加载时需要展示的图片)
  • img标签src属性都设置为未加载时展示图片的路径,并设置对应的data-xxx(此处我使用data-src)为真正需要展示图片的路径。
  • 判断当前图片是否已经进入用户浏览器的可视区域,若未进入,则继续展示未加载时展示的图片;如已进入,则将data-src中真正的图片路径动态赋值给src属性,从而将图片进行加载,最后达到懒加载的功能。

四、实现懒加载。

使用原生JavaScript实现

<div id="imgs"><img src="./images/img01.webp"class="img-item" data-src="./images/img01.webp" alt="blank"><img src="./images/img01.webp"class="img-item" data-src="./images/img02.webp" alt="blank"><img src="./images/img01.webp"class="img-item" data-src="./images/img03.webp" alt="blank"><img src="./images/img01.webp"class="img-item" data-src="./images/img04.webp" alt="blank"><img src="./images/img01.webp"class="img-item" data-src="./images/img05.webp" alt="blank"><img src="./images/img01.webp"class="img-item" data-src="./images/img06.webp" alt="blank"><img src="./images/img01.webp"class="img-item" data-src="./images/img07.webp" alt="blank"><img src="./images/img01.webp"class="img-item" data-src="./images/img08.webp" alt="blank"></div><script>const imgs = document.getElementsByClassName('img-item')functiongetScroll(){// 先获取设备的可视区域高度const vh = document.documentElement.clientHeight || window.innerHeight || document.body.clientHeight

            // 获取滑动区域的偏移高度const top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
            // for(const i in imgs){if(imgs[i].offsetTop <(vh + top)){
                    imgs[i].src = imgs[i].dataset.src //将data-src属性值赋值给src}}}// 节流函数的封装functionmythrottle(fn, interval){// 设置记录上一次触发的时间变量let lastTime =0// 设置对应的变量进行执行函数的接收const_mythrottle=function(){// 获取当前事件触发的时间let nowTime =newDate().getTime()// 获取执行函数的argumentsconst args = arguments
                // 计算等待时间let waitTime = interval -(nowTime - lastTime)// 判断当前是否允许执行对应的逻辑代码函数if(waitTime <=0){fn.apply(this, args)
                    lastTime = nowTime
                }}return _mythrottle
        }// 将scroll时间绑定在window元素上
        window.onscroll =mythrottle(getScroll,200)</script>

五、懒加载结果展示。

   可以观察到只有当用户将图片滑动至浏览器可视区域,真正的图片地址才会被请求,从而达到懒加载的效果(注意: 视频有背景音乐,请谨慎播放)。

总结

   这是我在做项目时使用到的性能优化操作 — 
图片懒加载

,鉴于自身实力的有限,可能在文章讲解中出现错误,大家可以私信或评论指出错误。创作不易,点个赞呗。同时有任何疑问我们一起交流,一起成长。如果有更好的文章,也欢迎贴在下面哦,我们相互学习。


本文转载自: https://blog.csdn.net/weixin_51422386/article/details/128181858
版权归原作者 见到我赶紧叫我敲代码。 所有, 如有侵权,请联系我们删除。

“JavaScript实现懒加载”的评论:

还没有评论