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 相关文章推荐
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
js实现select下拉框菜单
Dec 08 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
JavaScript实现京东快递单号查询
Nov 30 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
javascript测试题练习代码
2012/10/10 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
jQuery中data()方法用法实例
2014/12/27 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
js实现计算器功能
2020/08/10 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
Python中__init__和__new__的区别详解
2014/07/09 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
python 19个值得学习的编程技巧
2020/08/15 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
Java软件工程师综合面试题笔试题
2013/09/08 面试题
面试复试通知单
2015/04/24 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
基于Python实现股票收益率分析
2022/04/02 Python