使用v-lazy图片懒加载插件

news/2025/1/31 6:52:58/

图片懒加载效果

当我们上网冲浪的时候网络不顺畅，导致图片加载得相对较慢，容易造成页面塌陷的效果，使用图片懒加载插件，当图片没有加载完成的时候显示的是一张我们默认的照片（占位图片），图片加载后会自动替换，提高用户的体验效果。

环境

vue2.x版本

安装

npm install vue-lazyload --save安装为生产环境

配置入口文件

1）入口文件中引入：

import VueLazyload from 'vue-lazyload'；

2）全局配置懒加载的参数：

Vue.use(VueLazyLoad, {error: require("assets/img/loading/error.png"), // 图片加载失败显示loading: require("assets/img/loading/loading.png") // 图片加载中显示
});

3）将需要图片懒加载的img标签的:src改为v-lazy：

<img :src="item.icon" alt />改为<img v-lazy="item.icon" alt />，此时要注意，如果你引入的图片在static目录下，直接输入相对路径即可，如果你的图片在src下的某一个目录则使用require(’’)，此处的item.icon就是通过require引入的图片资源。<img class="icon" :src="require('assets/img/logo/logo.png')" alt />改为<img class="icon" v-lazy="require('assets/img/logo/logo.png')" alt />，这是一个简单的示例。

个性化配置

上面的都是使用全局的懒加载配置，比如我们想在某一处使用不同的懒加载显示图片，这个时候我们就需要个性化配置，以下是官方给出的配置，以及我自己的成功示例。

官方：

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }"><img data-src="//domain.com/img1.jpg"><img data-src="//domain.com/img2.jpg"><img data-src="//domain.com/img3.jpg">  
</div>

个人版

<div src-container="{ selector: 'img', error:require('assets/img/new/new1.png'),loading:require('assets/img/new/new1.png') }">
<img :data-src="require('assets/img/hot/hot2.png')" alt="图片" />
</div>