Vue项目加载图片，如果图片数量较多，一次性加载会影响页面性能。今天就来教大家使用vue-lazyload实现图片懒加载，同时展示默认图片和加载失败图片。

一、什么是vue-lazyload

vue-lazyload是一个Vue组件库，专门用来解决图片加载问题。它能实现图片的懒加载，也就是当图片滚动到浏览器的可视区域时才进行加载，这样能有效提升页面性能，适用于长列表、网格、表格等包含大量图片的场景。

二、安装vue-lazyload

安装vue-lazyload很简单，使用npm或者yarn都可以。在项目的终端中输入以下命令：

# 使用npm安装 npm install vue-lazyload # 使用yarn安装 yarn add vue-lazyload

三、引入并配置插件

安装完成后，需要在Vue项目中引入并配置vue-lazyload插件。通常在main.js文件中进行配置。

import Vue from 'vue'; import VueLazyload from 'vue-lazyload'; // 引入加载中和加载失败时显示的图片，这里使用项目中的本地图片 const loadimage = require('@/assets/loading.gif'); const errorimage = require('@/assets/error.png'); // 使用Vue.use来全局注册vue-lazyload插件，并进行相关配置 Vue.use(VueLazyload, { // 预加载高度比例，设置为1.3表示在距离可视区域1.3倍高度时开始加载图片 preLoad: 1.3, // 加载失败时显示的图片路径 error: errorimage, // 加载过程中显示的图片路径 loading: loadimage, // 加载失败后尝试加载的次数，这里设置为1次 attempt: 1 });

四、在模板中使用

配置好插件后，在模板中就能轻松使用vue-lazyload进行图片懒加载了。通过v-lazy指令来实现：

<template> <div> <!-- v-lazy指令绑定图片的src属性，alt属性用于描述图片内容 --> <img v-lazy="image.src" alt="description"> </div> </template> <script> export default { data() { return { // 定义一个对象，包含图片的src路径 image: { src: 'https://example.com/image.jpg' } }; } }; </script>

这样，当页面加载时，只有当图片进入可视区域，才会去加载https://example.com/image.jpg这张图片。

五、使用占位图和错误图

在前面配置插件时，我们设置了loading和error属性。这两个属性的作用是，当图片正在加载时，会显示loading指定的图片（这里是@/assets/loading.gif）；如果图片加载失败，则会显示error指定的图片（@/assets/error.png） 。在模板中还是像之前一样使用v-lazy指令，无需额外操作就能看到相应效果。

六、其他配置选项

vue-lazyload还有很多实用的配置选项：

  • preLoad：预加载高度比例，默认是1.3。这个值越大，图片会在距离可视区域越远的地方开始加载，可以根据项目需求调整。
  • error：设置加载失败时显示的图片，方便用户在图片加载出错时也能看到提示信息。
  • loading：用于指定加载过程中显示的图片，一般会选择一个加载动画，让用户知道图片正在加载。
  • attempt：加载失败后尝试加载的次数，默认是1次。如果网络不稳定，可以适当增加这个次数。

七、监听事件

在开发中，有时需要知道图片加载的状态，比如加载成功或者加载失败。vue-lazyload允许我们监听这些事件：

<template> <div> <img v-lazy="image.src" @lazyloaded="onLoad" @lazyerror="onError" alt="description" > </div> </template> <script> export default { data() { return { image: { src: 'https://example.com/image.jpg' } }; }, methods: { onLoad() { // 图片加载成功时，在控制台打印信息 console.log('Image loaded successfully'); }, onError() { // 图片加载失败时，在控制台打印信息 console.log('Image failed to load'); } } }; </script>

通过监听@lazyloaded和@lazyerror事件，在相应的方法中添加逻辑，就能实现对图片加载状态的处理啦。掌握了这些内容，在Vue项目中处理图片加载就轻松多了，快去试试吧！