vue框架图片懒记载插件 vue-lazyload

如果一个网页有上百张图片，那么肯定需要用懒加载的方式来加载图片，比如用户滚动了，图片在逐渐加载出来，避免一次性加载太多图片。

vue-lazyload官方demo。

vue-lazdload

1. npm install vue-lazyload --save-dev
2. vue项目引入

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
     loading: require('img/loading.png'),//加载中图片，一定要有，不然会一直重复加载占位图
     error: require('img/error.png')  //加载失败图片
});

1. image 标签使用 v-lazy指令替代src <img v-lazy="url">

需要注意的是，image标签不能通过vue的render函数渲染出来，否则v-lazy指令会失效。

vue-lazyload只支持image标签的懒加载，如果是video标签的话，可以设置video标签的preload属性为none来禁止预加载视频数据，同时通过poster提供占位图片

<video :src="url" preload="none" controls='controls'>
</video>

jquery图片延迟加载方案解决图片太多加载缓慢问题