基于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 实现的点击复制代码
Mar 24 Javascript
Javascript Object.extend
May 18 Javascript
JS常用正则表达式总结
Nov 12 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
基于IView中on-change属性的使用详解
Mar 15 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
JavaScript实现打砖块游戏
Feb 25 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
图片自动更新(说明)
2006/10/02 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python实现汉诺塔方法汇总
2016/07/25 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
Pytorch之parameters的使用
2019/12/31 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
社团招新策划书
2014/02/04 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
法制宣传月活动总结
2014/04/29 职场文书
记账会计岗位职责
2014/06/16 职场文书
佛光寺导游词
2015/02/10 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
边城读书笔记
2015/06/29 职场文书
欠条范文
2015/07/03 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
2016中秋节问候语
2015/11/11 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
python tkinter实现定时关机
2021/04/21 Python