投稿

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

Vedu • • 资源分享 • 阅读 1178

介绍

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2020-10-22 10:15
下一篇 2020-10-22 10:24

相关推荐

发表评论

登录后才能评论