vue-lazyload如何使用

本文小編為大家詳細介紹“vue-lazyload如何使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue-lazyload如何使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

v-lazy

這個是Vue-Lazyload最常用的一個東西，用法也非常的簡單：

<ul>
   <li v-for="img in list">
     <img v-lazy="img.src" >
   </li>
</ul>

我們現在來看看它的內部是如何實現的，首先我們進入它github上的源碼可以發現它的定義：

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)
})

我們可以發現它是利用vue的自定義指令實現的，vue的自定義指令可以自定義v-***之類的指令，例如你定義了Vue.directive('demo',..)那么你就可以使用v-demo這樣的指令，當你使用了之后就會有對應事件供你回調，例如bind,insert,unbind等，具體可以看看下面的demo：

=> vue自定義指令(二維碼)

進入demo后我們可以看到一進去就出發了bind和insert事件，然后你在輸入框輸入內容就會觸發update和updateComponent事件，當你點擊隱藏就會觸發unbind事件，當你點擊顯示則又會觸發bind和insert事件。(具體含義可以去查閱官方文檔)

vue的自定義指令還可以帶參數，例如vue-lazy:background-image.container='src'這樣的結構，我們可以通過事件里面的binding參數獲取到，例如上面的background-image可以通過binding.arg獲取，.container可以通過binding.modifiers獲取。

好了，講了這么多，v-lazy的實現思路應該比較清楚了，就是內部實現了一個lazy的類，通過vue自定義指令將對象和參數傳進去，然后通過檢測事件(scroll等)檢測位置，如果一旦這個對象出現在屏幕里就加載圖片。下面看看已經實現好的demo:(包含img的v-lazy和div的v-lazy:background-image兩種情況)

=> v-lazy demo(二維碼)

注意：這里的v-lazy='src'中的src一定要使用data里面的變量，不能寫真實的圖片路徑，這樣會報錯導致沒有效果，因為vue的自定義指令必須對應data中的變量或者是數字，你寫一個圖片路徑識別不了，我之前就是被坑了。（這里的圖片fadeIn效果是在load事件之后添加了一個fadeIn的class）。

v-lazy-container

這個總體上和v-lazy差不多，也是通過自定義指令去定義的，不過v-lazy-container掃描的是內部的子元素，v-lazy-container一般使用如下:

<div v-lazy-container="{ selector: 'img' }">
   <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">
</div>

v-lazy-container和v-lazy不同的是，v-lazy-container是通過設置指定的子元素的data-src,data-loading,data-error去設置圖片的路徑的，我們看內部實現就可以看到:

const imgs = this.getImgs()
imgs.forEach(el => {
   this.lazy.add(el, assign({}, this.binding, {
     value: {
       src: 'dataset' in el ? el.dataset.src : el.getAttribute('data-src'),
       error: 'dataset' in el ? el.dataset.error : el.getAttribute('data-error'),
       loading: 'dataset' in el ? el.dataset.loading : el.getAttribute('data-loading')
     }
   }), this.vnode)
 })

下面是寫好的v-lazy-container demo:

=> v-lazy-container demo(二維碼)

注：v-lazy-container內部指定元素設置的data-src是圖片的真實路徑，不能是data變量，這個和v-lazy完全相反。

lazy-component

這個和上面的不太一樣，這個嚴格來說不單單能夠做圖片懶加載，還可以做組件的懶加載，一般結構如下:

<lazy-component @show="handler">
   <img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>

實現方面，先用Vue.component('lazy-component',...)注冊了一個全局的組件，然后通過檢測位置，如果在視圖范圍之內就吐出它內部的內容，這個設計還是比較巧妙：

render (h) {
   if (this.show === false) {
     return h(this.tag)
   }
   return h(this.tag, null, this.$slots.default)
 },

我們一般用component都是指定一個template，它這里是利用render來自己生成內容，它這里通過一個變量show控制是否繪制內部的內容，開始的時候show為false，那么這里就繪制一個div(tag為div)，等檢測（檢測div）出現屏幕了，show就為true，就會繪制它內部的真實內容了（this.$slots.default就是自定義控件下面的內容）。

lazy-component作為一個組件，給外部提供了一個回調事件（show），表示已經開始load了，所以我們可以在外層監聽這個事件：

load () {
   this.show = true
   this.state.loaded = true
   this.$emit('show', this)
 }

我們來看一個做好的demo，這個demo還是以實現圖片懶加載為主。

=> lazy-component demo(二維碼)

注:lazy-component本身不能實現圖片懶加載，它只是實現組件懶加載，上面demo真正實現懶加載是因為用了v-lazy。lazy-component有一個問題，就是它的上方必須要有東西，否則可能沒有效果，因為它在檢測的時候有一個判斷：bottom>0，所以如果你在第一個元素使用lazy-component可能沒有效果。

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

讀到這里，這篇“vue-lazyload如何使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。