Atitit pagging翻頁與按需加載圖像 vue lazyload懶加載目錄1.1. 翻最好就是不翻頁直接加載一千資料咯 11.2. 使用VueLazyload 11.3. 五.更加方

Atitit pagging翻頁與按需加載圖像 vue lazyload懶加載

目錄

​​1.1. 翻最好就是不翻頁直接加載一千資料咯 1​​

​​1.2. 使用VueLazyload 1​​

​​1.3. 五.更加友善快捷的實作方式 2​​

​​1.4. 結束語：到這裡，我們的小demo也就基本完成了，雖然還有其他方法，在這裡我也就不一一闡述了，有興趣的可以自行網上學習了解。需要本項目源代碼的同學可以移步GitHub： 4​​

1. 翻最好就是不翻頁直接加載一千資料咯

按需加載資料即可。。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>

1. 使用VueLazyload

Vue.use(VueLazyload)

Vue.use(VueResource);   //這個一定要加上，指的是調用vue-resource.js

var example1 = new Vue({

    el: '#' + targetDivName,

    data: {items: [] },

<div class="videoBox-cover"  v-lazy:background-image="vo.vod_pic"

   >

1. 五.更加友善快捷的實作方式

1.了解一個API

這種實作方式我們隻需要了解一個API就行了：

getBoundingClientRect()//擷取元素的大小及位置

MDN上的解釋：

2.實作方式

通過上面的實驗我們都知道，懶加載的一個重點就是要知道什麼時候圖檔是進入了可視區内，那麼就上面這張圖而言，我們有什麼方法判斷圖檔進入了可視區呢。

其實很簡單：

我們先擷取圖檔到可視區頂部的距離,并擷取到可視區的高度：

var bound = el.getBoundingClientRect();

var clientHeight = window.innerHeight;//這個和前面擷取可視區高度的效果一樣，隻是相容性問題

然後我們繼續思考，當我們滾動條向下滾動的時候，bound.top值會變得越來越小，也就是圖檔到可視區頂部的距離也越來越小，是以當bound.top == clientHeight時，說明土片馬上就要進入可視區了，隻要我們在滾動，圖檔就會進入可視區，那麼就需要請求資源了。也就是說，在bound.top<=clientHeight時，圖檔是在可視區域内的。

經過上面的思考，我們大緻明白了如何實作，那麼就來編寫我們的代碼了吧：

隻需要把我們的js代碼換成如下即可：

 var imgs = document.querySelectorAll('img');

        //用來判斷bound.top<=clientHeight的函數，傳回一個bool值

        function isIn(el) {

            var bound = el.getBoundingClientRect();

            var clientHeight = window.innerHeight;

            return bound.top <= clientHeight;

        }

        //檢查圖檔是否在可視區内，如果不在，則加載

        function check() {

            Array.from(imgs).forEach(function(el){

                if(isIn(el)){

                    loadImg(el);

                }

            })

        }

        function loadImg(el) {

            if(!el.src){

                var source = el.dataset.src;

                el.src = source;

            }

        window.onload = window.onscroll = function () { //onscroll()在滾動條滾動的時候觸發

            check();

1. 結束語：到這裡，我們的小demo也就基本完成了，雖然還有其他方法，在這裡我也就不一一闡述了，有興趣的可以自行網上學習了解。