vue透過自定義指令判斷當前元素是否在可視區域

fuGUI發表於2023-05-04
Vue

背景：

類似百度百科那樣的結構展示元件，靜態Html展示沒啥問題，但是有的涉及到動態展示，比如一些報表元件和echarts元件展示，節點多了頁面介面會一次性請求然後全部渲染，這樣會造成頁面卡頓，體驗很不好。
源於之前提的一個問題：https://segmentfault.com/q/1010000043651218

解決問題過程

初次想到的辦法是：

將動態渲染的元件加一個類名然後透過document.querySelectorAll()獲取到全部的dom，頁面滾動的時候透過遍歷獲取到的dom，判斷當前dom是否在可視區域內，這種是可以判斷當前元件進入的可視區域，但是沒法和元件的引數關聯，嘗試多種方法關聯最後失敗告終。

後來在網上找到一個自定義指令外掛：

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/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>

相關文章