lazyload（超好用的Vue图片懒加载库VueLazyload）

前沿

应用开发中图片的加载是比较耗资源的，处理不好，就会影响应用的加载速度，导致用户体验比较差劲

今天给大家介绍一个Vue的图片懒加载库Vue-Lazyload，这个库的几个优势在于

图片差不多在屏幕快可见的范围内时才开始加载图片在资源请求成功前，可以设置一个默认loading图片图片加载失败，可以设置一个默认的加载失败图片github地址：https://github.com/hilongjw/vue-lazyload

使用教程

1、安装依赖

// 安装依赖npm i vue-lazyload -S

2、修改Vue的main.js文件

// main.jsimport Vue from 'vue'import App from './App.vue'import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)// loading的默认图片const loadimage = require('./assets/loading.gif')// 加载失败的默认图片const errorimage = require('./assets/error.gif')// 插件引入的方式Vue.use(VueLazyload, { error: errorimage, loading: loadimage})new Vue({ el: '#app', components: { App }})

3、组件或者页面中使用

// 给img标签加上v-lazy的指令就可以了<ul> <li v-for="img in list"> <img v-lazy="img.src" > </li></ul>

Vue-Lazyload目前只支持Vue1和和Vue2，如果大家要想在Vue3当中使用图片懒加载的话，可以考虑安装vue3-lazy，它的语法和Vue-Lazyload差不多一样

github地址：https://github.com/ustbhuangyi/vue3-lazy

1、依赖安装

// 安装依赖npm i vue3-lazy -S

2、修改main.js

// 修改main.jsimport { createApp } from 'vue'import App from './app'import lazyPlugin from 'vue3-lazy'// loading的默认图片const loadimage = require('./assets/loading.gif')// 加载失败的默认图片const errorimage = require('./assets/error.gif')const app = createApp(App)// 插件引入的方式app.use(lazyPlugin, { loading: loadimage, error: errorimage})app.mount('#app')

3、组件或页面中使用

// 组件或页面中使用<ul> <li v-for="img in list"> <img v-lazy="img.src" > </li></ul>

好了Vue的图片懒加载就介绍到这了

觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧