基于Vue的延迟加载插件vue-view-lazy
程序员文章站
2022-05-15 11:05:52
基于vue的懒加载插件
目的:图片或者其他资源进入可视区域后加载
安装使用
直接下载dist目录下的使用
使用npm安装
直接使用...
基于vue的懒加载插件
目的:图片或者其他资源进入可视区域后加载
安装使用
- 直接下载dist目录下的使用
- 使用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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: java实现zip压缩文件
推荐阅读
-
jquery插件lazyload.js延迟加载图片的使用方法
-
vue插件vue-lazyload懒加载插件的使用及在过程中遇到的图片不更新问题
-
基于vue框架手写一个notify插件实现通知功能的方法
-
基于vue中css预加载使用sass的配置方式详解
-
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
-
vue-lazyload图片延迟加载插件的实例讲解
-
jquery插件lazyload.js延迟加载图片的使用方法
-
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
-
基于vue和react的spa进行按需加载的实现方法
-
jq动画插件,自制基于vue的圆形时钟