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中的onerror事件概述及使用
Apr 01 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
Angular 封装并发布组件的方法示例
Apr 19 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
js实现图片实时时钟
Jan 15 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
详解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
PL-880隐藏功能
2021/03/01 无线电
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
有关php运算符的知识大全
2011/11/03 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
php实现Session存储到Redis
2015/11/11 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
jQuery JSON的解析方式分享
2011/04/05 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
Python: 传递列表副本方式
2019/12/19 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
音乐教师求职信范文
2015/03/20 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
欧元符号 €
2022/02/17 杂记