分享一个精简的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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 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 - Html Transfer Code
2006/10/09 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
jquery选择器简述
2015/08/31 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
Python表示矩阵的方法分析
2017/05/26 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Django REST framework 分页的实现代码
2019/06/19 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
python RSA加密的示例
2020/12/09 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
初中生三年学习生活的自我评价
2013/11/03 职场文书
应届毕业生个人自荐信范文
2013/11/30 职场文书
大学生实习思想汇报
2014/01/12 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
幼儿园家长寄语
2014/04/02 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
党建工作整改措施
2014/10/28 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python