其他分享
首页 > 其他分享> > vue框架图片懒记载插件 vue-lazyload

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

标签:插件,vue,标签,image,lazyload,加载,图片
来源: https://www.cnblogs.com/linyihai/p/14752495.html