Vue使用图片懒加载_图片加载loading-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_47548037/article/details/128387559

本文介绍了图片懒加载的概念，旨在解决页面加载时图片突然跳出现象，提升用户体验。通过使用 Vue-lazyload 库，详细展示了安装、配置及在 Vue 项目中应用的过程，包括预加载比例、错误图片、加载动图的设置，并提供了一个简单的 SVG 加载动图示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么要使用图片懒加载？

从后端获取数据时有一定的延迟，加载的时候图片会突然跳出来，图片懒加载就是在还没获取到图片数据的时候放一张动图占位，获取到数据再替换，增加用户体验。

安装

npm install vue-lazyload@1.3.4 --save

main.js引入

// 引入图片懒加载
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
  preLoad: 1.3,//预压高度比例
  error: require('@/assets/err.jpg'),//错误图片
  loading: require('@/assets/loading-bubbles.svg'),//加载动图
  attempt: 1,
});

package.json中查看安装是否成功

在vue中使用，我这里是把图片保存在后端再取出。

附：loading-bubbles.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#ee7a23">
  <circle transform="translate(8 0)" cx="0" cy="16" r="0">
    <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0"
      keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
  </circle>
  <circle transform="translate(16 0)" cx="0" cy="16" r="0">
    <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.3"
      keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
  </circle>
  <circle transform="translate(24 0)" cx="0" cy="16" r="0">
    <animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.6"
      keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
  </circle>
</svg>