基于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中的parseInt使用技巧
Sep 03 Javascript
用js解决数字不能换行问题
Aug 10 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
几种tab切换详解
Feb 03 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
js实现星星海特效的示例
Sep 28 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类
2006/07/15 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
xml和web特殊字符
2009/04/28 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
学习ExtJS accordion布局
2009/10/08 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
mint-ui在vue中的使用示例
2018/04/05 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
Python中new方法的详解
2019/01/15 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
python中pyqtgraph知识点总结
2021/01/26 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
Java程序员面试题
2016/09/27 面试题
大学生就业自荐信
2013/10/26 职场文书
工商管理系学生的自我评价分享
2013/11/29 职场文书
应届生如何写自荐信
2014/01/05 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
档案工作汇报材料
2014/08/21 职场文书