图片懒加载imgLazyLoading.js使用详解

什么是图片懒加载？

图片懒加载是指在页面滚动的时候，只加载可视区域内的图片，而不去加载整个页面中的图片，从而提高网页的加载速度和性能。

imgLazyLoading.js的使用方法

1. 引入imgLazyLoading.js文件

将imgLazyLoading.js文件下载并放置于项目中，然后在页面中引入该文件。

<script src="imgLazyLoading.js"></script>

1. 在img标签中添加data-src属性

在需要懒加载的img标签中添加data-src属性，该属性的值为图片的真实地址。

<img data-src="image.jpg">

1. 初始化imgLazyLoading

在页面中添加以下代码，来初始化懒加载插件。

const lazyLoading = new imgLazyLoading();
lazyLoading.init();

1. 懒加载JS代码示例

下面是一个具体的实现示例：

<!-- 引入imgLazyLoading.js -->
<script src="imgLazyLoading.js"></script>

<!-- 图片列表，需要懒加载的图片添加data-src属性 -->
<div class="img-list">
  <img data-src="image-1.jpg">
  <img data-src="image-2.jpg">
  <img data-src="image-3.jpg">
  <img data-src="image-4.jpg">
</div>

<script>
// 初始化imgLazyLoading
const lazyLoading = new imgLazyLoading({
  // 可选参数，设置图片距离屏幕多少像素时开始加载，默认为0
  distance: 100,
  // 可选参数，设置滚动事件的触发时间间隔，默认为250ms
  interval: 100
});
lazyLoading.init();
</script>

imgLazyLoading.js使用注意事项

1. 在使用imgLazyLoading.js时，需要确保页面中存在class为"img-list"的img父元素，因为js代码中需要获取到该元素。

2. 在添加data-src属性时，不要将图片的真实地址放到src属性中，否则图片会在页面打开的时候立即加载。

3. 如果图片元素在初始化懒加载时已经在屏幕内，那么这个元素后续也不会被加载，需要刷新页面才可以重新懒加载。

示例说明

示例1

在以下示例中，我们在页面中添加了一个可滚动的容器，容器中包含了多张需要懒加载的图片。我们在添加data-src属性时，将其设置为图片的真实地址。在页面加载时，所有图片都不会被加载，只有当图片进入到可视区域时才会加载，从而提高了网页的加载速度和性能。

<!-- 引入imgLazyLoading.js -->
<script src="imgLazyLoading.js"></script>

<style>
  /* 容器必须设置高度和overflow属性 */
  .container {
    height: 400px;
    overflow: auto;
  }
</style>

<!-- 可滚动的容器 -->
<div class="container">
  <!-- 需要懒加载的图片 -->
  <img data-src="image-1.jpg">
  <img data-src="image-2.jpg">
  <img data-src="image-3.jpg">
  <img data-src="image-4.jpg">
  <img data-src="image-5.jpg">
  <img data-src="image-6.jpg">
  <img data-src="image-7.jpg">
  <img data-src="image-8.jpg">
  <img data-src="image-9.jpg">
  <img data-src="image-10.jpg">
</div>

<script>
// 初始化imgLazyLoading
const lazyLoading = new imgLazyLoading();
lazyLoading.init();
</script>

示例2

在以下示例中，我们重新设置了可选参数distance的值为200，这意味着当图片距离屏幕200像素的时候才会开始加载。同时也设置了interval的值为50，表示滚动事件的触发时间间隔为50ms，可以使懒加载的效果更加流畅。

<!-- 引入imgLazyLoading.js -->
<script src="imgLazyLoading.js"></script>

<style>
  /* 容器必须设置高度和overflow属性 */
  .container {
    height: 400px;
    overflow: auto;
  }
</style>

<!-- 可滚动的容器 -->
<div class="container">
  <!-- 需要懒加载的图片 -->
  <img data-src="image-1.jpg">
  <img data-src="image-2.jpg">
  <img data-src="image-3.jpg">
  <img data-src="image-4.jpg">
  <img data-src="image-5.jpg">
  <img data-src="image-6.jpg">
  <img data-src="image-7.jpg">
  <img data-src="image-8.jpg">
  <img data-src="image-9.jpg">
  <img data-src="image-10.jpg">
</div>

<script>
// 初始化imgLazyLoading
const lazyLoading = new imgLazyLoading({
  // 设置距离屏幕200像素时开始加载
  distance: 200,
  // 设置滚动事件的触发时间间隔为50ms
  interval: 50
});
lazyLoading.init();
</script>