浅谈vue-lazyload实现的详细过程


Posted in Javascript onAugust 22, 2017

本文介绍了浅谈vue-lazyload实现的详细过程,分享给大家,也给自己留个笔记

首先 ,在命令行输入npm install vue-lazyload&&cnpm install vue-lazyload

然后,在main.js里引入这个模块。

import 'VueLazyload' from 'vue-lazyload'
Vue.use(VueLazyload,{
   preload:1.3,//预加载的宽高
   loading:"img的加载中的显示的图片的路径",
   error:"img加载失败时现实的图片的路径",
   attempt:3,//尝试加载的次数
   listenEvents:['scroll','wheel','mousewheel','resize','animationend','transitionend','touchmove'], //你想让vue监听的事件
})

然后在app.vue的template里写一个

<img v-lazy="img.src"/>

然后在app.vue的script里写

data(){
  return {
   img:{
     src:"图片的真是路径"
        }
      }
    }

捋一下思路:

//main.js


// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import $ from 'jquery'
import 'assets/bootstrap/css/bootstrap.min.css'
import 'assets/bootstrap/js/bootstrap.min'
import router from '@/router/index'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload,{
  preload:1.3,
  loading:require('../static/imgs/ad3.png'),
//解释一下为什么是require('.....url'):因为vue自带webpack打包工具,如果是图片路径就会把他当成模块解析,所以直接引入就好了。
//记得把里面的路径换成自己的哦
  listenEvents:['mousewheel'],
})
//载入vue-router
//import Vue from 'vue'
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})


//app.vue


<template>
 <div id="app">
  <navbar></navbar>
  <router-view></router-view>
  <hello></hello>
 <ul>
  <li v-for="item in imgUrl">
   <img v-lazy="item.src" alt="" width="300" height="150"/>
  </li>
 </ul>
 <img v-lazy='img[0].src'/>
 </div>
</template>

<script>
  import hello from './components/Hello'
  import Navbar from '@/components/navBar'
  import route from '@/components/route'
export default {
 name: 'app',
 components:{
  hello,
  Navbar
 },
 data() {
  return {
   imgUrl: [
    {src: require('@/assets/imgs/ad1.png')},//记得把里面的路径换成自己的哦
    {src: require('@/assets/imgs/ad1.png')},//记得把里面的路径换成自己的哦
   ],
   img:[
    {src:require('@/assets/imgs/ad2.png')}//记得把里面的路径换成自己的哦
   ]
  }
 }
}
</script>

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
} 
</style>

这只是一个简单的vue-lazyload的实现,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
JQuery for与each性能比较分析
May 14 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 #Javascript
React复制到剪贴板的示例代码
Aug 22 #Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 #Javascript
vue.js异步上传文件前后端实现代码
Aug 22 #Javascript
node中koa中间件机制详解
Aug 22 #Javascript
理解javascript async的用法
Aug 22 #Javascript
React Native之TextInput组件解析示例
Aug 22 #Javascript
You might like
德生PL550的电路分析
2021/03/02 无线电
为查询结果建立向后/向前按钮
2006/10/09 PHP
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
PHP控制网页过期时间的代码
2008/09/28 PHP
php cookie 登录验证示例代码
2009/03/16 PHP
PHP扩展开发入门教程
2015/02/26 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
浅谈Vue数据绑定的原理
2018/01/08 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
Python ZipFile模块详解
2013/11/01 Python
python操作xml文件详细介绍
2014/06/09 Python
python实现批量修改文件名代码
2017/09/10 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
python图片合成的示例
2020/11/09 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
python使用smtplib模块发送邮件
2020/12/17 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
简单说说tomcat的配置
2013/05/28 面试题
酒店服务实习自我鉴定
2013/09/22 职场文书
国贸专业个人求职信分享
2013/12/04 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
2014年护士长工作总结
2014/11/11 职场文书