自定义图片懒加载，提升网页加载速度与用户体验

前端

2023-09-13 13:31:15

概述

图片是网页中常见的元素之一，但它们通常体积较大，加载起来需要较长时间。当一个网页中包含大量图片时，这可能会导致网页加载缓慢，影响用户体验。为了解决这个问题，人们发明了图片懒加载技术。

图片懒加载是一种延缓加载图片的技术，仅在图片可见时才将其加载。这可以显著提高网页的加载速度和用户体验，尤其是在移动设备上。

原理

图片懒加载的原理很简单：在图片元素上添加一个占位符，然后在图片元素可见时替换占位符为实际的图片。

实现图片懒加载有两种常见的方法：

使用 <img> 标签的 loading 属性：<img> 标签的 loading 属性可以设置为 `"lazy"，这会告诉浏览器在图片元素可见时才加载图片。
使用 JavaScript：您可以使用 JavaScript 来实现图片懒加载。您可以使用滚动事件来检查图片元素的 top 值与屏幕的高度，从而判断图片元素是否可见。如果图片元素可见，则替换图片元素的 src 属性为实际的图片路径。

基于 Vue.js 实现的图片懒加载

以下是一个基于 Vue.js 实现的图片懒加载示例：

<template>
  <div>
    <img :src="placeholder" :data-src="image" @scroll="handleScroll">
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: 'https://example.com/image.jpg',
      placeholder: 'https://example.com/placeholder.jpg'
    }
  },
  methods: {
    handleScroll() {
      const image = this.$refs.image
      const rect = image.getBoundingClientRect()

      if (rect.top < window.innerHeight && rect.bottom > 0) {
        image.src = this.image
      }
    }
  }
}
</script>

这个示例中，我们使用了一个 <img> 标签来显示图片。我们使用了 :src 属性来绑定图片的 src 属性，并使用了 :data-src 属性来存储图片的实际路径。我们还使用了 @scroll 事件来监听滚动事件。当滚动事件发生时，我们使用 getBoundingClientRect() 方法来获取图片元素的位置信息。如果图片元素可见，则我们替换图片元素的 src 属性为实际的图片路径。