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 相关文章推荐
基于jquery的多功能软键盘插件
Jul 25 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
three.js 如何制作魔方
Jul 31 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无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
php实现文件下载实例分享
2014/06/02 PHP
php事务处理实例详解
2014/07/11 PHP
php生成图片验证码的方法
2016/04/15 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
Python和C/C++交互的几种方法总结
2017/05/11 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
python安装后的目录在哪里
2020/06/21 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
Python实现京东抢秒杀功能
2021/01/25 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
药品采购员岗位职责
2014/02/08 职场文书
空乘英文求职信
2014/04/13 职场文书
赡养老人协议书
2014/04/21 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
小学优秀教师材料
2014/12/15 职场文书
教师个人事迹材料
2014/12/17 职场文书
兼职安全员岗位职责
2015/02/15 职场文书