手记

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把<img :src="item.image" alt="img">
改成<img  v-lazy="item.image" alt="img">

效果加载中


image.png


加载完成


image.png


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

image.png

更多参数


image.png



作者:前端来入坑
链接:https://www.jianshu.com/p/1f73ea7d6030


0人推荐
随时随地看视频
慕课网APP