浅谈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 相关文章推荐
关于JS管理作用域的问题
Apr 10 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
JS提交form表单实例分析
Dec 10 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
关于定制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
967 个函式
2006/10/09 PHP
php 将excel导入mysql
2009/11/09 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
python-地图可视化组件folium的操作
2020/12/14 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
医学护理毕业生自荐信
2013/11/07 职场文书
物流专业毕业生推荐信范文
2013/11/18 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
高三生物教学反思
2016/02/22 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js