常见图片懒加载方式有哪些

合集 - 前端小知识点(35)

1.使用同一个链接，如何实现PC打开是web 应用、手机打开是一个H5应用01-01 2.如何保证用户的使用体验01-01 3.如何解决页面请求接口大规模并发问题01-01 4.设计一套全站请求耗时统计工具01-01 5.大文件上传01-01 6.h5如何解决移动端适配问题01-01 7.实现站点一键换肤功能实现方式有哪些01-01 8.如何实现网页加载进度条01-01

9.常见图片懒加载方式有哪些01-01

10.cookie构成部分有哪些01-01 11.DNS协议了解多少01-01 12.函数式编程了解多少01-01 13.一直在window上面挂东西是否有什么风险01-01 14.小程序为什么会有两个线程01-01 15.如何通过设置失效时间清除本地存储的数据?01-01 16.如果不使用脚手架，如果用webpack构建一个自己的react应用01-01 17.用 nodejs 实现一个命令行工具，统计输入目录下面指定代码的行数01-01 18.package.json 里面 sideEffects 属性的作用01-01 19.script 标签上有那些属性01-01 20.SPA 中使用 hash 路由时作用和意义01-01 21.用户访问页面白屏了，原因是啥如何排查?01-01 22.[代码实现]S 中如何实现大对象深度对比01-01 23.JavaScript 中处理 100 万数据时确保性能和流畅度的几种方法01-01 24.<script> 标签放在 HTML 文档的 <body> 内底部01-01 25.虚拟滚动加加载的原理和实现思路01-01 26.ts二刷01-11 27.promise面试题01-11 28.命令行创建 uni-app 项目01-12 29.uniapp+v3的小知识点01-26 30.ts文件忽略校验01-27 31.['',''].join(" ").trim()01-28 32.自定义导航栏交互(导航栏左上角按钮+滚动动画效果)01-28 33.可视化点击x轴标签实现标签文字切换02-09 34.运行vue -V的时候vue : 无法加载文件 C:\Users\jiaho\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本02-12 35.uniapp+vue2实现下载相关02-26

原生JavaScript实现懒加载
- 原理：利用浏览器的可视区域（getBoundingClientRect函数可以获取元素相对于视窗的位置）来判断图片是否进入可视区域。当图片进入可视区域时，将图片的src属性设置为真实的图片地址，从而实现懒加载。
- 实现步骤：
  - 首先，将图片的src属性设置为一个占位符（通常是一个小尺寸的默认图片或者一个简单的加载提示图标），同时将真实的图片地址存储在data - src（自定义属性）中。例如：
```
<img src="placeholder.jpg" data - src="real - picture.jpg" alt="Picture">
```
  - 然后，在JavaScript中获取所有需要懒加载的图片元素，并添加滚动事件监听器。当滚动事件发生时，遍历所有图片，判断它们是否进入可视区域。例如：
```
const lazyImages = document.querySelectorAll('img[data - src]');
const lazyLoad = function () {
  lazyImages.forEach((img) => {
    if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0) {
      img.src = img.dataset.src;
      img.removeAttribute('data - src');
    }
  });
};
window.addEventListener('scroll', lazyLoad);
window.addEventListener('load', lazyLoad);
```
- 优点：不需要引入外部库，纯原生JavaScript实现，对代码量较小的项目比较友好，易于理解和定制。
- 缺点：需要手动处理滚动等事件，代码逻辑相对复杂一些；在性能上可能不如一些经过优化的第三方库；如果页面中有大量图片，可能会对性能产生一定影响。
使用Intersection Observer API实现懒加载
- 原理：Intersection Observer API是浏览器提供的一种异步观察目标元素与祖先元素或视窗（viewport）交叉状态的方法。通过这个API，可以轻松地观察图片元素是否进入可视区域，当交叉比例达到一定阈值时，触发回调函数进行懒加载。
- 实现步骤：
  - 同样，先将图片的src属性设置为占位符，真实图片地址放在data - src属性中。例如：
```
<img src="placeholder.jpg" data - src="real - picture.jpg" alt="Picture">
```
  - 然后，在JavaScript中使用Intersection Observer API。例如：
```
const lazyImages = document.querySelectorAll('img[data - src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data - src');
      observer.unobserve(img);
    }
  });
});
lazyImages.forEach((img) => {
  observer.observe(img);
});
```
- 优点：性能较好，因为它是浏览器原生支持的异步API，不需要频繁地检查元素是否进入可视区域，减少了浏览器的开销；代码相对简洁，使用方便。
- 缺点：兼容性方面，一些旧版本的浏览器可能不支持Intersection Observer API，需要考虑兼容性处理，如使用@babel/polyfill或者提供备用的懒加载方案。
利用第三方库实现懒加载（以LazyLoad.js为例）
- 原理：第三方懒加载库通常封装了复杂的判断和加载逻辑，提供简单易用的接口。以LazyLoad.js为例，它会自动检测页面中的图片元素，根据其配置的参数（如可视区域的阈值、加载动画等）来实现懒加载。
- 实现步骤：
  - 首先，引入LazyLoad.js库。可以通过下载库文件并在HTML中引入，或者使用CDN链接引入。例如：
```
<script src="https://cdn.jsdelivr.net/npm/vanilla - lazyload@17.3.1/dist/lazyload.min.js"></script>
```
  - 然后，在JavaScript中初始化懒加载。例如：
```
const lazyLoadInstance = new LazyLoad();
```
  - 可以通过配置参数来定制懒加载的行为。例如，设置可视区域的阈值为50%，即当图片50%进入可视区域时开始加载：
```
const lazyLoadInstance = new LazyLoad({
  threshold: 0.5
});
```
- 优点：功能强大，通常具有较好的兼容性处理，提供多种配置选项，如加载动画、延迟加载时间等，可以快速实现懒加载功能并且有较好的用户体验。
- 缺点：需要引入外部库，增加了项目的依赖；如果库的体积较大，可能会增加页面的加载时间。

posted @ 2025-01-01 18:26 jialiangzai 阅读(73) 评论(0) 编辑收藏举报

JIA

光明神已陨落，现在由光明引领我

常见图片懒加载方式有哪些

公告

最新随笔

我的标签

合集

随笔分类

随笔档案

文章分类

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

喜欢请打赏