vue-lazyload图片延迟加载插件的实例讲解


Posted in Javascript onFebruary 09, 2018

1、首先在npm上下载vue-lazyload的引用包

npm install vue-lazyload --save-dev

2、然后我们在main.js里面import这个包,当然,单单这一个包是不够的,还得其他的文件

import Vue from 'vue';
import App from './App.vue'
import router from './router';
import VueLazyload from "vue-lazyload"

3、然后我们配置vue-lazyload

Vue.use(VueLazyload, {
error: 'static/error.png',//这个是请求失败后显示的图片
loading: 'static/loading.gif',//这个是加载的loading过渡效果
try: 2 // 这个是加载图片数量
})

4、具体配置api可以看下图

vue-lazyload图片延迟加载插件的实例讲解

html

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

JS

<script>
 export default {
 data () {
  return {
    list: [
    'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
    'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
    'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
    'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
    'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
    'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
    'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
   ]
  }
 }
 }
</script>

css

<style>
//图片加载中...
img[lazy=loading] {
 /*width: 100px;*/
 background-position:center center!important;
 background: url("../../../static/images/loading.gif");
 background-size:100px 100px;
 background-repeat:no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
img[lazy=error] {
 /*width: 100px;*/
 background-position:center center!important;
 background: url("../../../static/images/error.png");
 background-size:100px 100px;
 background-repeat:no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
img[lazy=loaded] {
 /*width: 100px;*/
 background-position:center center!important;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 background-color: green;
}
/*
 or background-image
 */
 .yourclass[lazy=loading] {
 /*your style here*/
 }
 .yourclass[lazy=error] {
 /*your style here*/
 }
 .yourclass[lazy=loaded] {
 /*your style here*/
 }
</style>

以上这篇vue-lazyload图片延迟加载插件的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 #Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 #Javascript
vue中使用ueditor富文本编辑器
Feb 08 #Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 #Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 #Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 #Javascript
web前端页面生成exe可执行文件的方法
Feb 08 #Javascript
You might like
PHP文件下载类
2006/12/06 PHP
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
javascript html 静态页面传参数
2009/04/10 Javascript
js 对象是否存在判断
2009/07/15 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
python实现连接mongodb的方法
2015/05/08 Python
Python实现带百分比的进度条
2016/06/28 Python
python opencv之分水岭算法示例
2018/02/24 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
django之自定义软删除Model的方法
2019/08/14 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
Pytorch中.new()的作用详解
2020/02/18 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
Java中compareTo和compare的区别
2016/04/12 面试题
教师一岗双责责任书
2014/04/16 职场文书
学校火灾防控方案
2014/06/09 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android