• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue-view-lazy: 基于vue的懒加载插件,图片或者其他资源进入可视区域后加载 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

vue-view-lazy

开源软件地址:

https://gitee.com/cncgx/vue-view-lazy

开源软件介绍:

vue-view-lazy

原文链接:gitee.com

基于vue的懒加载插件

目的:图片或者其他资源进入可视区域后加载

注意

该插件依赖IntersectionObserver API,如需在较低版本浏览器运行,需要引入 polyfill

安装使用

  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/[email protected]/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>

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap