基于Vue的延迟加载插件vue-view-lazy
时间:2019-04-15
本文章向大家介绍基于Vue的延迟加载插件vue-view-lazy,主要包括基于Vue的延迟加载插件vue-view-lazy使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
基于vue的懒加载插件
目的:图片或者其他资源进入可视区域后加载
安装使用
- 直接下载dist目录下的vue-view-lazy.min.js使用
- 使用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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 任意阶幻方..
- 大数乘大数
- HDUOJ-----2824The Euler function
- HDUOJ--1874 畅通工程续
- HDUOJ---2112HDU Today
- HDUOJ-----2066一个人的旅行
- HDUOJ --2544最短路(基础)
- 帮同学的忙,随意写了个课程设计(关于循环双向列表)
- HDUOJ---3371Connect the Cities
- 初学HTML一些基本控件语句
- java学习之第五章编程题示例(初学篇)
- java第四章编程题(初学篇)
- java测试Unicode编码以及数组的运用(初学篇)
- HDUOJ---1754 Minimum Inversion Number (单点更新之求逆序数)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在裸机上部署Pulsar集群 顶
- JNI回调Java
- 你的函数有多快?使用 performance 监控前端性能
- spring security 密码过期强制修改密码
- Spring Boot入门系列(十五) SpringBoot开发环境热部署的配置
- idea启用springboot项目热部署
- 【LeetCode每日一题】22. Generate Parentheses
- Apache的三种工作模式
- 一个Activity向另外一个Activity传递值的方法
- 活动被系统回收,临时数据的保存方法
- C语言入门系列之5.循环控制结构程序
- 知晓当前在哪一个活动
- 一键退出程序
- C语言入门系列之7.函数的定义、参数、调用和存储类别
- Python Django开发 异常及其解决办法(二)