章
目
录
当页面图片较多时，一次性加载所有图片会影响页面性能，导致加载速度变慢，用户体验不佳。这时，图片懒加载技术就派上用场了。今天我们就来聊聊如何在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文件里进行配置，具体步骤如下：
- 引入
Vue和VueLazyload：
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';
- 准备加载中和加载失败时显示的图片：
// 可选：配置加载中和加载失败时的图片
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实现图片懒加载，以及展示默认图片和加载失败图片的功能。希望这篇文章能帮助大家在项目开发中更好地优化图片加载，提升用户体验吧。
