浅谈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浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 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
linux下编译安装memcached服务
2014/08/03 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
js动态引入的四种方法
2018/05/05 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
Python设置默认编码为utf8的方法
2016/07/01 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
员工培训心得体会
2013/12/30 职场文书
市场专员岗位职责
2014/02/14 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
竞选村长演讲稿
2014/04/28 职场文书
城市创卫标语
2014/06/17 职场文书
行政助理岗位职责
2015/02/10 职场文书
赢在执行观后感
2015/06/16 职场文书
安全生产学习心得体会
2016/01/18 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技