vue-lazyload–基于Vue的开源延迟加载插件

介绍

vue-lazyload是一个基于Vue的延迟加载插件,用于延迟加载Vue组件或者图像。


一个基于Vue的开源延迟加载插件——vue-lazyload

Github

https://github.com/hilongjw/vue-lazyload

特点

  1. 轻便,功能强大且易于使用
  2. 处理任何图像类型
  3. 加载图像时添加加载类
  4. 同时支持Vue 1.0和Vue 2.0

快速开始

npm i vue-lazyload -S
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js">script>
<script>
  Vue.use(VueLazyload)
  ...
script>

使用

  • main.js
import Vue from \'vue\'
import App from \'./App.vue\'
import VueLazyload from \'vue-lazyload\'

Vue.use(VueLazyload)

// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: \'dist/error.png\',
  loading: \'dist/loading.gif\',
  attempt: 1
})

new Vue({
  el: \'body\',
  components: {
    App
  }
})
  • template
<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  li>
ul>
  • v-lazy-container使用原始HTML
<div v-lazy-container="{ selector: \'img\' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
div>
  • 自定义错误和加载占位符图像
<div v-lazy-container="{ selector: \'img\', error: \'xxx.jpg\', loading: \'xxx.jpg\' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
div>
“{ selector: \’img\’ }”> data-src=“//domain.com/img1.jpg” data-error=“xxx.jpg”> data-src=“//domain.com/img2.jpg” data-loading=“xxx.jpg”> data-src=“//domain.com/img3.jpg”>
  • 配置
一个基于Vue的开源延迟加载插件——vue-lazyload

总结

具体详细的使用参考Github上的文档,vue-lazyload非常适合用在图片加在较多的网页上,效果优雅!

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/12886.html

发表评论

登录后才能评论