图片懒加载：提高网页性能的有效方法

图片懒加载

这里将了如何配置图片懒加载：提高网页性能的有效方法

图片懒加载演示（F12 切换到 Network Img下进行图片加载查看）

刷新页面 Network 的Img下面只会加载可视区域的图片-向下滚动就会加载新的图片

网页开发中，优化性能是至关重要的。一种常见的性能优化方法是延迟加载图片，以减少初始页面加载时间和带宽占用。本文将介绍如何使用 JavaScript 中的 IntersectionObserver 来实现图片懒加载，并提供了一个实用的代码示例。

什么是图片懒加载？

图片懒加载是一种技术，它使页面在初始加载时只加载可见区域内的图片，而不是一次性加载所有图片。当用户滚动页面时，这些图片会动态加载，从而减少了初始加载时间和资源消耗。

使用 IntersectionObserver 实现图片懒加载

在现代浏览器中，可以使用 IntersectionObserver 来实现图片懒加载。这个 API 允许您监测元素是否进入了视口（即可见区域），并在需要时触发回调函数。

下面是一个使用 IntersectionObserver 的 JavaScript 函数示例，它可以用来实现图片懒加载：

jsx
/**
 * 图片懒加载
 * @param el dom 目标元素
 * @param arr 列表数据
 * @description data-xxx 属性用于存储页面或应用程序的私有自定义数据
 */
import { nextTick } from 'vue';
export const lazyImg = (el, arr) => {
  const io = new IntersectionObserver((res) => {
    res.forEach((v) => {
      if (v.isIntersecting) {
        const { img, key } = v.target.dataset;
        v.target.src = img;
        v.target.onload = () => {
          io.unobserve(v.target);
          arr[key]['loading'] = false;
        };
      }
    });
  });
  nextTick(() => {
    document.querySelectorAll(el).forEach((img) => io.observe(img));
  });
};

这个函数接受两个参数：

el：一个字符串，表示要懒加载的图片元素的 CSS 选择器。
arr：一个数组，可能用于跟踪图片加载状态的数据。

如何使用 lazyImg 函数

要使用 lazyImg 函数来实现图片懒加载，您需要按照以下步骤操作：

引入 lazyImg 函数，确保它可用于您的项目。
在 HTML 中为需要懒加载的图片添加 data-img 和 data-key 跟 data-lazy-img-list 属性

:data-img="v.img"：这是一个自定义数据属性，以 data- 开头。它的作用是存储每个图片元素的实际图片的URL。在这个例子中，它将 v.img 的值分配给 data-img，其中 v 表示在循环中的当前数据对象，img 是数据对象中存储实际图片URL的属性

:data-key="k"：这也是一个自定义数据属性，用于存储每个图片元素的关键信息或索引。在这个例子中，它将 k 的值分配给 data-key，其中 k 是在循环中的当前索引，通常用于标识数据中的每个元素。

:data-lazy-img-list="k"：类似于上述属性，这是另一个自定义数据属性，它也存储了与图片元素相关的信息。在这个例子中，它将 k 的值分配给 data-lazy-img-list，用于标识图片元素。

jsx
<el-row :gutter="15">
          <el-col
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="4"
            class="mb15"
            v-for="(v, k) in state.tableData.data"
            :key="k"
          >
                <div class="item-img" v-loading="v.loading">
                  <img :data-img="v.img" :data-key="k" :data-lazy-img-list="k" />
                </div>
          </el-col>
        </el-row>

调用 lazyImg 函数并传递选择器和数组作为参数。

jsx
// 页面加载时
onMounted(() => {
  other.lazyImg("[data-lazy-img-list]", state.tableData.data);
});

数据结构

jsx
const state = reactive({
  tableData: {
    data: [
	{
		img: 'https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg',
		title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
		id: 1,
		loading: true,
	}
],
    total: 99,
    loading: false,
    param: {
      pageNum: 1,
      pageSize: 10,
    },
  },
});

当用户滚动页面时，IntersectionObserver 将检测图片是否进入了可见区域。如果进入了可见区域，图片将被加载。

总结

图片懒加载是一种有助于提高网页性能的有效方法。通过使用 IntersectionObserver 和上述示例中的 lazyImg 函数，您可以轻松地实现图片懒加载，并改善用户体验，减少页面加载时间和资源消耗。在网页开发中，性能优化是一个持续的过程，因此将这种技术集成到您的项目中是非常有益的。