锐客网

  1. 首页 > it技术 > >

vue|vue-lazyload懒加载插件的使用

1.vue-lazyload在npm上面的网址https://www.npmjs.com/package/vue-lazyload
2.安装，在vue-cli中安装

npm install vue-lazyload -D

3.在HTML中安装

4.在vue-cli中的使用
在main.js中配置
import VueLazyload from 'vue-lazyload'//使用懒加载组件 Vue.use(VueLazyload,{ error: require('./assets/img/404nofind.jpg'),//当加载图片失败的时候 loading: require('./assets/img/loading.png'),//当加载图片成功的时候 preLoad:1 })

一些配置的参数
vue|vue-lazyload懒加载插件的使用
文章图片

5.在需要的组件中使用
5.1v-lazy
  • vue|vue-lazyload懒加载插件的使用
    文章图片
    //data-src里面的地址是真实的地址，就是build之后在dist文件夹中的img里面的地址vue|vue-lazyload懒加载插件的使用
    文章图片
    vue|vue-lazyload懒加载插件的使用
    文章图片
    vue|vue-lazyload懒加载插件的使用
    文章图片
    vue|vue-lazyload懒加载插件的使用
    文章图片
    vue|vue-lazyload懒加载插件的使用
    文章图片
    vue|vue-lazyload懒加载插件的使用
    文章图片
    vue|vue-lazyload懒加载插件的使用
    文章图片
    vue|vue-lazyload懒加载插件的使用
    文章图片

【vue|vue-lazyload懒加载插件的使用】

    推荐阅读


    上一篇：700页的机器学习笔记火了！完整版开放下载

    下一篇：angular|angular8 — 数据更新但页面不刷新