当页面图片较多时，一次性加载所有图片会影响页面性能，导致加载速度变慢，用户体验不佳。这时，图片懒加载技术就派上用场了。今天我们就来聊聊如何在Vue项目里借助vue-lazyload实现图片懒加载，以及如何展示默认图片和加载失败图片。

一、vue-lazyload介绍

vue-lazyload是一个专门用于Vue项目的图片懒加载插件。它能让图片在需要显示的时候才进行加载，而不是一开始就全部加载，大大提升了页面的加载速度和性能。比如在长列表、网格、表格等包含大量图片的场景中，vue-lazyload的优势就更加明显了。

二、安装vue-lazyload

要使用vue-lazyload，首先得安装它。安装方法很简单，通过npm或者yarn都能完成安装：

  • 使用npm安装：
npm install vue-lazyload
  • 使用yarn安装：
yarn add vue-lazyload

三、引入并配置插件

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

  1. 引入Vue和VueLazyload：
import Vue from 'vue'; import VueLazyload from 'vue-lazyload';
  1. 准备加载中和加载失败时显示的图片：
// 可选：配置加载中和加载失败时的图片 const loadimage = require('@/assets/loading.gif'); const errorimage = require('@/assets/error.png');

这里通过require方法引入了自定义的加载中动画图片loading.gif和加载失败提示图片error.png，你可以根据项目需求替换成自己的图片路径。
3. 全局注册vue-lazyload并进行配置：

Vue.use(VueLazyload, { preLoad: 1.3, error: errorimage, loading: loadimage, attempt: 1 });

在这个配置中：

  • preLoad表示预加载高度比例，默认值是1.3 。意思是当图片距离视口还有一定距离（这个距离是图片自身高度的1.3倍）时，就开始加载图片，提前做好准备，让用户感觉图片加载更流畅。
  • error指定了加载失败时显示的图片，这里设置为前面引入的errorimage。
  • loading指定了加载过程中显示的图片，即前面引入的loadimage。
  • attempt表示加载失败后尝试加载的次数，这里设置为1次。

四、在模板中使用vue-lazyload

配置好插件后，就可以在模板中使用了。通过v-lazy指令，就能轻松实现图片懒加载。示例代码如下：

<template> <div> <img v-lazy="image.src" alt="description"> </div> </template> <script> export default { data() { return { image: { src: 'https://example.com/image.jpg' } }; } }; </script>

在这段代码里，v-lazy="image.src"指令告诉vue-lazyload，当图片进入视口时才加载image.src指定的图片。alt属性用于描述图片内容，对图片加载失败时的提示和搜索引擎优化都有帮助。

五、使用占位图和错误图

前面配置vue-lazyload时设置了loading和error图片，在实际使用中，这两个配置就会发挥作用。当图片开始加载时，会显示loading指定的占位图；如果图片加载失败，则会显示error指定的错误图。这样用户在等待图片加载和遇到加载失败的情况时，都能看到相应提示，提升了用户体验。代码还是上面模板和脚本中的代码，只要配置正确，就会自动实现这个效果。

六、其他配置选项

vue-lazyload还提供了很多其他配置选项，在插件初始化时可以根据项目需求进行设置：

  • preLoad：前面已经提到，它是预加载高度比例，默认1.3 。数值越大，预加载的提前量越大，但也可能会消耗更多资源，需要根据实际情况调整。
  • error：加载失败时显示的图片路径，可根据项目风格自定义。
  • loading：加载过程中显示的图片路径，通常设置为加载动画图片，让用户知道图片正在加载。
  • attempt：加载失败后尝试加载的次数。如果网络不稳定，可以适当增加这个次数，但次数太多可能会影响用户体验，需要权衡。

七、监听事件

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="onLoad"和@lazyerror="onError"分别绑定了加载成功和加载失败的回调函数onLoad和onError。在onLoad函数里，我们简单地在控制台打印了图片加载成功的提示；在onError函数里，打印了图片加载失败的提示。实际项目中，你可以在这些函数里执行更复杂的操作，比如提示用户、记录日志等。

通过以上步骤，我们就完成了在Vue项目中使用vue-lazyload实现图片懒加载，以及展示默认图片和加载失败图片的功能。希望这篇文章能帮助大家在项目开发中更好地优化图片加载，提升用户体验吧。