分享一个精简的vue.js 图片lazyload插件实例


Posted in Javascript onMarch 13, 2017

这个插件未压缩版本只有7.62kb,很精简,支持img标签和background-img资源的lazyload。支持vue.js 1.0 和vue.js 2.0

安转

$ npm install vue-lazyload --save

使用方法

//main.js

import Vue from 'vue'
// import VueLazyload
import VueLazyload from 'vue-lazyload'

//use custom directive
Vue.use(VueLazyload)

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

new Vue({
 el: 'body',
})
<!--your.vue-->
<script>
export default {
 data () {
  return {
   list: [
    'your_images_url', 
    'your_images_url', 
    // you can customer any image's placeholder while loading or load failed
    {
     src: 'your_images_url.png',
     error: 'another-error.png',
     loading: 'another-loading-spin.svg'
    }
   ]
  }
 }
}
</script>

<template>
 <div class="img-list">
  <ul id="container">
   <li v-for="img in list">
    <img v-lazy="img">
   </li>
  </ul>
 </div>
</template>

这里可以定制所有加载中和加载失败加载成功的样式,

<style>
 img[lazy=loading] {
  /*your style here*/
 }
 img[lazy=error] {
  /*your style here*/
 },
 img[lazy=loaded] {
  /*your style here*/
 }
 /*
 or background-image
 */
 .yourclass[lazy=loading] {
  /*your style here*/
 }
 .yourclass[lazy=error] {
  /*your style here*/
 },
 .yourclass[lazy=loaded] {
  /*your style here*/
 }
</style>

API

Options

params type detail
preLoad Number proportion of pre-loading height
error String error img src
loading String loading img src
attempt Number attempts count

demo下载地址:vue-lazyloadz_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
关于JS中prototype的理解
Sep 07 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
常用的几个JQuery代码片段
Mar 13 #Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 #Javascript
jquery实现表单获取短信验证码代码
Mar 13 #Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 #Javascript
VUE实现日历组件功能
Mar 13 #Javascript
JS正则表达式判断有效数实例代码
Mar 13 #Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 #Javascript
You might like
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
haskell实现多线程服务器实例代码
2013/11/26 Python
Python去掉字符串中空格的方法
2014/03/11 Python
Python函数参数类型*、**的区别
2015/04/11 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
python下载微信公众号相关文章
2019/02/26 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
总经理岗位职责
2013/11/09 职场文书
应届毕业生应聘自荐信
2013/12/07 职场文书
纪律教育月活动总结
2014/08/26 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
公司员工奖惩制度
2015/08/04 职场文书
反邪教教育心得体会
2016/01/15 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
导游词之太原天龙山
2020/01/02 职场文书