基于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 相关文章推荐
用JS实现一个页面多个css样式实现
May 29 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
Vue表单实例代码
Sep 05 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 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数据库类
2009/05/27 PHP
php 404错误页面实现代码
2009/06/22 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
php实现等比例压缩图片
2018/07/26 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
python实现计算图形面积
2021/02/22 Python
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
大学生职业生涯规划书范文
2014/01/04 职场文书
红领巾心向党广播稿
2014/01/19 职场文书
秘书英文求职信范文
2014/01/31 职场文书
运动会800米加油稿
2014/02/22 职场文书
星级党支部申报材料
2014/05/31 职场文书
教师个人考察材料
2014/12/16 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
2016年公司新年寄语
2015/08/17 职场文书