vue图片懒加载lazy-load

• 第一步安装

npm i vue-lazyload -D

• 第二步引入

import VueLazyload from 'vue-lazyload'

• 第三步简单配置参数（两种图片路径方法）

//最外层static目录下的图片引用
Vue.use(VueLazyload,{
    error:'/static/images/logo.png',//图片加载失败时候显示的图片
    loading:'/static/images/loading.gif'//图片还未加载完成时候的loading图片
})
//src下的assets目录下的图片
Vue.use(VueLazyload,{
    error:require('./assets/images/logo.png'),
    loading:require('./assets/images/loading.gif')
})

因为src中的文件会被webpack编译，assets文件夹中的图片地址，会在编译过程中重命名。vue-lazyload是在main.js文件中引入，不会被webpack进行编译，因此vue-lazyload无法获得正确的图片地址，所以直接写相对地址就无法获取到图片正确地址

• 第四步写loading图片的样式（具体怎么写样式根据情况来，也可以不写）

img[lazy="loading"]{
  display:block;
  width:50px !important;
  height:50px !important;
  margin:0 auto;
  }

• 第五步使用

:src--->v-lazy
把
改成

效果加载中

image.png

加载完成

image.png

友情提示（谷歌模拟网速慢的时候看loading效果F12---Network---Slow 3G）

image.png

更多参数

image.png

详情请看lazy-load官网：https://www.npmjs.com/package/vue-lazyload

gzh.jpg

每日分享前端技术知识，致力于帮助更多前端人翻过一座座山，踏过一个个坑。