vue-view-lazy：基於vue2.x懶加載解決方案

原文連接：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/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:'數據' },https://juejin.im/editor/posts/5b013ac2518825672034563f# methods:{ handleModel(){ console.log('出現了'); },https://juejin.im/editor/posts/5b013ac2518825672034563f# }, }) </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>
複製代碼