浅谈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 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
python 如何在测试中使用 Mock
2021/03/01 Python
华为c/c++笔试题
2016/01/25 面试题
教师个人自我鉴定
2014/02/08 职场文书
档案保密承诺书
2014/06/03 职场文书
教师节活动总结
2014/08/29 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
党小组考察意见
2015/06/02 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android