原生JS实现图片懒加载：提升页面性能与流量管理

118 浏览量更新于2024-08-31 收藏 341KB PDF 举报

本文主要探讨了如何利用原生JavaScript实现页面性能优化的图片懒加载策略。在现代Web开发中，当页面包含大量图片时，一次性加载所有图片可能导致页面加载速度变慢和消耗过多流量，特别是对于用户可能只浏览部分内容的情况。图片懒加载，也称为按需加载或延迟加载，是一种有效的优化手段，它允许网页仅加载用户当前可见区域内的图片，从而提升首屏加载速度和用户体验。实现图片懒加载的基本思路包括以下几个步骤： 1. 使用data-src属性：在HTML的`<img>`标签上添加自定义`data-src`属性，用于存储实际的图片URL。这样做的目的是为了在页面初始加载时，只显示占位符（如alt属性），而将真实图片地址隐藏。 2. 滚动事件监听：在JavaScript中，通过监听滚动事件，检查用户滚动到页面的哪个部分。当图片位于可视区域（即浏览器视口内）时，再执行进一步的判断。 3. 判断图片状态：对于每个可视的图片元素，检查它是否已经完成了加载。如果尚未加载，调用图片的`load`事件或者使用`naturalHeight`属性来确定。只有当图片完全加载后，才将其src属性设置为data-src中的真实URL，从而触发图片的显示。 4. 示意图辅助理解：文章提供了一个简化的手绘示意图来帮助读者理解图片元素如何与浏览器视口的关系，以及何时触发图片的加载。以下是一个简单的示例代码片段，展示了如何在HTML和JavaScript中实现这个功能： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生js实现图片懒加载</title> <style> /* 样式省略 */ </style> </head> <body> <div class="container"> <ul> <li> <img src=".../placeholder.jpg" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg"> </li>  </ul> </div> <script> window.addEventListener('scroll', function() { const container = document.querySelector('.container'); const images = container.querySelectorAll('img[data-src]'); images.forEach((img) => { if (img.getBoundingClientRect().top <= window.innerHeight) { if (!img.complete || img.naturalHeight === 0) { // 判断图片未加载 img.src = img.dataset.src; // 设置src为data-src，触发加载 } } }); }); </script> </body> </html> ``` 总结来说，通过原生JavaScript实现图片懒加载，可以显著提高网页的性能，减少网络流量，并改善用户体验。通过合理使用data-src属性和滚动事件，我们可以让网页在快速加载首屏内容的同时，根据用户行为动态加载更多图片。

原生原生JS实现图片懒加载之页面性能优化实现图片懒加载之页面性能优化

在项目开发中，我们往往会遇到一个页面需要加载很多图片的情况。我们可以一次性加载全部的图片，但是考虑到用户有可能只浏览部分图片。所以我们需要对图片

加载进行优化，只加载浏览器窗口内的图片，当用户滚动时，再加载更多的图片。这种加载图片的方式叫做图片懒加载，又叫做按需加载或图片的延时加载。这样做

的好处是：1.可以加快页面首屏渲染的速度；2.节约用户的流量。

一一.实现思路实现思路

1.图片img标签自定义一个属性data-src来存放真实的地址。

2.当滚动页面时，检查所有的img标签，判断是否出现在事业中，如果出现在视野中，继续进行判断，看齐是否被加载过了，如果没有加载，那就进行加载。

判断图片元素是否处于浏览器视野中的示意图（手绘）：

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38625448

粉丝: 8

原生JS实现图片懒加载：提升页面性能与流量管理

原生JS实现图片懒加载技巧

原生JavaScript实现图片懒加载技术详解

原生JavaScript实现滚动懒加载动画效果

原生JS实现图片懒加载(lazyload)实例

LazyLoad原生JavaScript实现的懒加载库兼容到IE8

原生javaScript实现图片延时加载的方法

原生js实现懒加载.zip

原生JS图片懒加载：IntersectionObserver实现与polyfill兼容

原生javascript实现图片滚动、延时加载功能

使用jQuery或者原生js实现鼠标滚动加载页面新数据

最新资源