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

　　前沿
　　应用开发中图片的加载是比较耗资源的，处理不好，就会影响应用的加载速度，导致用户体验比较差劲
　　今天给大家介绍一个Vue的图片懒加载库Vue-Lazyload，这个库的几个优势在于图片差不多在屏幕快可见的范围内时才开始加载图片在资源请求成功前，可以设置一个默认loading图片图片加载失败，可以设置一个默认的加载失败图片github地址：https://github.com/hilongjw/vue-lazyload
　　使用教程
　　1、安装依赖// 安装依赖 npm i vue-lazyload -S
　　2、修改Vue的main.js文件// main.js import 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的指令就可以了 
   
        
 
　　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.js import { 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、组件或页面中使用// 组件或页面中使用 
   
        
 
　　好了Vue的图片懒加载就介绍到这了
　　觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧