JavaScript实现懒加载-创新互联

文章目录

• 前言
• 一、懒加载是什么？
• 二、懒加载的特点。
• 三、懒加载的实现原理。
• 四、实现懒加载。
• 五、懒加载结果展示。
• 总结

成都创新互联公司专业提供达州托管服务器服务，为用户提供五星数据中心、电信、双线接入解决方案，用户可自行在线购买达州托管服务器服务，并享受7*24小时金牌售后服务。

---

前言

身为开发人员的我们进行项目开发时，不仅仅要对页面进行设计，而且还要考虑项目上线后是否能进行性能优化，从而达到减轻对服务器的负载，让用户拥有一个友好的项目体验感。常见的项目性能优化方式有很多。例如：减少HTTP请求，减少DNS查询，避免重定向，图片懒加载等。接下来，为大家介绍项目性能优化之一 —图片懒加载。

一、懒加载是什么？

懒加载也叫延迟加载，按需加载。指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。
如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。
原文链接：点击跳转

二、懒加载的特点。

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

三、懒加载的实现原理。

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

四、实现懒加载。

使用原生JavaScript实现

五、懒加载结果展示。

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

总结

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

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

分享标题：JavaScript实现懒加载-创新互联
链接分享：http://shouzuofang.com/article/gejgg.html