分享一个精简的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 相关文章推荐
jquery 日期分离成年月日的代码
May 14 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
js实现无缝滚动特效
Dec 20 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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编程实现获取excel文档内容的代码实例
2011/06/28 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
简单实现python收发邮件功能
2018/01/05 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
韩国现代百货官网:Hmall
2018/03/21 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
会计学个人自荐信模板
2013/12/13 职场文书
法制宣传月活动方案
2014/05/11 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
优秀教师个人总结
2015/02/11 职场文书
小学教师自我评价
2015/03/04 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
超市员工管理制度
2015/08/06 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
vue里使用create, mounted调用方法
2022/04/26 Vue.js