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图片延迟加载方案解决图片太多加载缓慢问题

上一篇:React---新扩展setState和lazyLoad


下一篇:jquery.lazyload -- 中文文档 -- 延迟加载图片的jQuery插件