分享一个精简的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中get,post和ajax方法的使用小结
Feb 04 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
Vue 事件处理操作实例详解
Mar 05 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计划任务、定时执行任务的实现代码
2011/04/23 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
Python理解递归的方法总结
2019/01/28 Python
基于Python实现用户管理系统
2019/02/26 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
python 实用工具状态机transitions
2020/11/21 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
大学生简历中个人的自我评价
2013/10/06 职场文书
高级电工工作职责
2013/11/21 职场文书
合作意向书模板
2014/03/31 职场文书
母亲节演讲稿
2014/05/27 职场文书
社会实践活动总结范文
2014/07/03 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
出纳试用期自我评价
2015/03/10 职场文书
结婚幸福感言
2015/08/01 职场文书
聘用合同范本
2015/09/21 职场文书
多人股份制合作协议书
2016/03/19 职场文书
创业计划书之水果店
2019/07/18 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
python unittest单元测试的步骤分析
2021/08/02 Python