基于Vue的延迟加载插件vue-view-lazy


Posted in Javascript onMay 21, 2018

基于vue的懒加载插件

目的:图片或者其他资源进入可视区域后加载

安装使用

  1. 直接下载dist目录下的vue-view-lazy.min.js使用
  2. 使用npm安装

直接使用

<div id="app">
  <span v-view-lazy @model="handleModel"></span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="./dist/vue-view-lazy.min.js"></script>
<script>
  Vue.use(vViewLazy.default,{});
  new Vue({
    el:'#app',
    data:{
      msg:'数据'
    },
    methods:{
      handleModel(){
        console.log('出现了');
      },
    },
  })
</script>

npm:

$ npm install --save-dev vue-view-lazy

引入vue-view-lazy

.main文件

import vView from 'vue-view-lazy'
Vue.use(vView,{
  error:'../../static/images/loading.png',
  loading:'../../static/images/loading.gif',
});

懒加载图片

.vue文件

<template>
  <ul id='img'>
    <li class="in" v-for="(item,i) in imgs" :key="i">
      <img src="#" alt="图片" v-view-lazy="item.src">
    </li>
  </ul>
</template>

<script>
  export default {
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        imgs:[
          {src:'../../static/images/img1.jpg'},
          {src:'../../static/images/img2.png'},
          {src:'../../static/images/img2.jpg'},
          {src:'../../static/images/img3.jpg'},
          {src:'../../static/images/img4.jpg'},
          {src:'../../static/images/img5.jpeg'}, 
        ]
      }
    },
    mounted(){
    },
  }
</script>
<style scoped>
  ...
</style>

懒加载数据

.vue文件

<template>
  <div>
    <!--@model自定义事件是在该dom在第一次出现在视口内时触发的方法-->
    <!--v-view-lazy='method' 或 v-view-lazy='(e)=>method(e,...arg)'-->
    <div class="cnt" v-for="(v,i) in msg" :key="i" v-view-lazy @model="(e)=>getAjaxContent(e,v.msg)">
      loading...
    </div>
    <div class="cnt" v-for="(v,i) in msg" :key="i" v-view-lazy @model="getAjaxContent()">
      loading...
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        msg:[]
      }
    },
    mounted(){
      fetch('http://localhost:3000/test').then(res=>res.json()).then(res=>{
        this.msg = res;
      })
    },
    methods:{
      getAjaxContent(event,msg){
        event.innerText = msg
      },
    }
  }
</script>

<style scoped>
  .cnt {
    /*background: #ececec;*/
    height: 500px;
    margin-bottom: 50px;
  }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Select操作大集合
May 26 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 Javascript
jQuery获取随机颜色的实例代码
May 21 #jQuery
JS实现常见的查找、排序、去重算法示例
May 21 #Javascript
vue组件jsx语法的具体使用
May 21 #Javascript
关于vue的语法规则检测报错问题的解决
May 21 #Javascript
JS实现520 表白简单代码
May 21 #Javascript
了解ESlint和其相关操作小结
May 21 #Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 #Javascript
You might like
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
用Python实现一个简单的线程池
2015/04/07 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
在pycharm中显示python画的图方法
2019/08/31 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
python爬虫用mongodb的理由
2020/07/28 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
销售辞职信范文
2015/03/02 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
MySQL优化及索引解析
2022/03/17 MySQL