JavaScript实现懒加载-创新互联

文章目录

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

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

前言

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

一、懒加载是什么？

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

二、懒加载的特点。

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

三、懒加载的实现原理。

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