如果一个网页有上百张图片,那么肯定需要用懒加载的方式来加载图片,比如用户滚动了,图片在逐渐加载出来,避免一次性加载太多图片。
vue-lazyload官方demo。
npm install vue-lazyload --save-dev
- vue项目引入
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
loading: require('img/loading.png'),//加载中图片,一定要有,不然会一直重复加载占位图
error: require('img/error.png') //加载失败图片
});
- 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>