vue|vue-lazyload懒加载插件的使用
1.vue-lazyload在npm上面的网址https://www.npmjs.com/package/vue-lazyload
2.安装，在vue-cli中安装
npm install vue-lazyload -D3.在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
})一些配置的参数
文章图片
5.在需要的组件中使用
5.1v-lazy
文章图片
//data-src里面的地址是真实的地址，就是build之后在dist文件夹中的img里面的地址
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
【vue|vue-lazyload懒加载插件的使用】
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 无故.
- VueX--VUE核心插件
- 二十一|二十一 - 草稿
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)