這篇文章主要介紹了vue-lazyload如何用的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue-lazyload如何用文章都會有所收獲，下面我們一起來看看吧。
創(chuàng)新互聯(lián)建站成立于2013年，我們提供高端成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、網(wǎng)站定制、成都營銷網(wǎng)站建設(shè)、微信平臺小程序開發(fā)、微信公眾號開發(fā)、網(wǎng)站推廣服務(wù)，提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計、程序開發(fā)來完成項目落地，為衛(wèi)生間隔斷企業(yè)提供源源不斷的流量和訂單咨詢。
v-lazy
這個是Vue-Lazyload最常用的一個東西，用法也非常的簡單：
我們現(xiàn)在來看看它的內(nèi)部是如何實現(xiàn)的，首先我們進入它github上的源碼可以發(fā)現(xiàn)它的定義：
重慶分公司
重慶分公司
Vue.directive('lazy', {
bind: lazy.add.bind(lazy),
update: lazy.update.bind(lazy),
componentUpdated: lazy.lazyLoadHandler.bind(lazy),
unbind: lazy.remove.bind(lazy)
})
Vue.directive('lazy-container', {
bind: lazyContainer.bind.bind(lazyContainer),
update: lazyContainer.update.bind(lazyContainer),
unbind: lazyContainer.unbind.bind(lazyContainer)
})我們可以發(fā)現(xiàn)它是利用vue的自定義指令實現(xiàn)的，vue的自定義指令可以自定義v-***之類的指令，例如你定義了Vue.directive('demo',..)那么你就可以使用v-demo這樣的指令，當你使用了之后就會有對應事件供你回調(diào)，例如bind,insert,unbind等，具體可以看看下面的demo：
=> vue自定義指令(二維碼)
進入demo后我們可以看到一進去就出發(fā)了bind和insert事件，然后你在輸入框輸入內(nèi)容就會觸發(fā)update和updateComponent事件，當你點擊隱藏就會觸發(fā)unbind事件，當你點擊顯示則又會觸發(fā)bind和insert事件。(具體含義可以去查閱官方文檔)
vue的自定義指令還可以帶參數(shù)，例如vue-lazy:background-image.container='src'這樣的結(jié)構(gòu)，我們可以通過事件里面的binding參數(shù)獲取到，例如上面的background-image可以通過binding.arg獲取，.container可以通過binding.modifiers獲取。
好了，講了這么多，v-lazy的實現(xiàn)思路應該比較清楚了，就是內(nèi)部實現(xiàn)了一個lazy的類，通過vue自定義指令將對象和參數(shù)傳進去，然后通過檢測事件(scroll等)檢測位置，如果一旦這個對象出現(xiàn)在屏幕里就加載圖片。下面看看已經(jīng)實現(xiàn)好的demo:(包含img的v-lazy和div的v-lazy:background-image兩種情況)
=> v-lazy demo(二維碼)
注意：這里的v-lazy='src'中的src一定要使用data里面的變量，不能寫真實的圖片路徑，這樣會報錯導致沒有效果，因為vue的自定義指令必須對應data中的變量或者是數(shù)字，你寫一個圖片路徑識別不了，我之前就是被坑了。（這里的圖片fadeIn效果是在load事件之后添加了一個fadeIn的class）。
v-lazy-container
這個總體上和v-lazy差不多，也是通過自定義指令去定義的，不過v-lazy-container掃描的是內(nèi)部的子元素，v-lazy-container一般使用如下:
