前言

身为开发人员的我们进行项目开发时，不仅仅要对页面进行设计，而且还要考虑项目上线后是否能进行性能优化，从而达到减轻对服务器的负载，让用户拥有一个友好的项目体验感。常见的项目性能优化方式有很多。例如：减少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')function getScroll() {// 先获取设备的可视区域高度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}}}// 节流函数的封装function mythrottle(fn, interval) {// 设置记录上一次触发的时间变量let lastTime = 0// 设置对应的变量进行执行函数的接收const _mythrottle = function () {// 获取当前事件触发的时间let nowTime = new Date().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>

五、懒加载结果展示。

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

总结

这是我在做项目时使用到的性能优化操作 — 图片懒加载，鉴于自身实力的有限，可能在文章讲解中出现错误，大家可以私信或评论指出错误。创作不易，点个赞呗。同时有任何疑问我们一起交流，一起成长。如果有更好的文章，也欢迎贴在下面哦，我们相互学习。

JavaScript实现懒加载相关推荐

javascript图片懒加载与预加载的分析
懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技 ...
【JavaScript】懒加载
懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用. We ...
前端性能优化不完全手册【已更新至React、原生JS懒加载和Nginx负载均衡】
性能优化是一门大学问,本文仅对个人一些积累知识的阐述,欢迎下面补充. 抛出一个问题,从输入url地址栏到所有内容显示到界面上做了哪些事? 1.浏览器向DNS服务器请求解析该 URL 中的域名所对应的 ...
图片懒加载和Vue路由懒加载
图片懒加载什么是懒加载? 懒加载也叫做延迟加载或者按需加载 .在长网页中延迟加载暂时未看到的图片数据,能够优化网页性能,提高用户体验 .在较长的网页或应用中,如果图片很多,等待全部图片都被加载出来需 ...
java 懒加载模式_JavaScript面试系列：JavaScript设计模式之桥接模式和懒加载
我写的程序员面试系列文章 Java面试系列-webapp文件夹和WebContent文件夹的区别? 程序员面试系列:Spring MVC能响应HTTP请求的原因? Java程序员面试系列-什么是Jav ...
JavaScript两个实用的图片懒加载优化方法
文章目录一.方法一二.方法二 InterSectionObserver 一.方法一重点: 1.getBoundingClientRect().top > window.innerHeigh ...
java页面展示流式图片,javascript瀑布流式图片懒加载实例解析与优化
之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒 ...
【JavaScript】图片的懒加载
[JavaScript]图片的懒加载文章目录 [JavaScript]图片的懒加载 1. 懒加载 2. 利用`scroll`事件利用`HTMLElement.offsetTop` 利用`Eleme ...
JavaScript中的懒加载——概念，作用，原理，实现步骤，以及3种原生js实现方式
1.什么是懒加载? 懒加载也就是延迟加载. 当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图), 只有当图片出现在浏览 ...

JavaScript实现懒加载

文章目录

前言