這篇文章主要為大家展示了“vue-lazyload怎么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue-lazyload怎么用”這篇文章吧。

創(chuàng)新互聯(lián)是專業(yè)的秦州網(wǎng)站建設(shè)公司，秦州接單;提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行秦州網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

當(dāng)你用vue開發(fā)的時(shí)候，不可避免的就會(huì)遇到圖片懶加載的問題，之前jquery時(shí)代有jquery.lazyload.js，但是那個(gè)肯定不能用在vue的項(xiàng)目里。查閱資料后發(fā)現(xiàn)Vue-Lazyload這個(gè)插件用的頻率還是比較高，最近剛好也在研究vue的懶加載，順便也仔細(xì)研究了以下這個(gè)插件，這個(gè)插件確實(shí)能夠?qū)崿F(xiàn)懶加載，但是坑也有不少，今天就一起來看看Vue-Lazyload。 Vue-Lazyload的github地址

主要功能&實(shí)現(xiàn)思路

這篇文章不是去講解這個(gè)插件是如何配置的，這個(gè)在它的github上都有介紹，因此你要先大致了解它是如何配置的。這里主要從源碼角度去分析該如何正確使用這款插件。

v-lazy

這個(gè)是Vue-Lazyload最常用的一個(gè)東西，用法也非常的簡(jiǎn)單：

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

我們現(xiàn)在來看看它的內(nèi)部是如何實(shí)現(xiàn)的，首先我們進(jì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的自定義指令實(shí)現(xiàn)的，vue的自定義指令可以自定義v-***之類的指令，例如你定義了Vue.directive('demo',..)那么你就可以使用v-demo這樣的指令，當(dāng)你使用了之后就會(huì)有對(duì)應(yīng)事件供你回調(diào)，例如bind,insert,unbind等，具體可以看看下面的demo：

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

進(jìn)入demo后我們可以看到一進(jìn)去就出發(fā)了bind和insert事件，然后你在輸入框輸入內(nèi)容就會(huì)觸發(fā)update和updateComponent事件，當(dāng)你點(diǎn)擊隱藏就會(huì)觸發(fā)unbind事件，當(dāng)你點(diǎn)擊顯示則又會(huì)觸發(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的實(shí)現(xiàn)思路應(yīng)該比較清楚了，就是內(nèi)部實(shí)現(xiàn)了一個(gè)lazy的類，通過vue自定義指令將對(duì)象和參數(shù)傳進(jìn)去，然后通過檢測(cè)事件(scroll等)檢測(cè)位置，如果一旦這個(gè)對(duì)象出現(xiàn)在屏幕里就加載圖片。下面看看已經(jīng)實(shí)現(xiàn)好的demo:(包含img的v-lazy和div的v-lazy:background-image兩種情況)

=> v-lazy demo(二維碼)

注意：這里的v-lazy='src'中的src一定要使用data里面的變量，不能寫真實(shí)的圖片路徑，這樣會(huì)報(bào)錯(cuò)導(dǎo)致沒有效果，因?yàn)関ue的自定義指令必須對(duì)應(yīng)data中的變量或者是數(shù)字，你寫一個(gè)圖片路徑識(shí)別不了，我之前就是被坑了。（這里的圖片fadeIn效果是在load事件之后添加了一個(gè)fadeIn的class）。

v-lazy-container

這個(gè)總體上和v-lazy差不多，也是通過自定義指令去定義的，不過v-lazy-container掃描的是內(nèi)部的子元素，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是通過設(shè)置指定的子元素的data-src,data-loading,data-error去設(shè)置圖片的路徑的，我們看內(nèi)部實(shí)現(xiàn)就可以看到:

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內(nèi)部指定元素設(shè)置的data-src是圖片的真實(shí)路徑，不能是data變量，這個(gè)和v-lazy完全相反。

lazy-component

這個(gè)和上面的不太一樣，這個(gè)嚴(yán)格來說不單單能夠做圖片懶加載，還可以做組件的懶加載，一般結(jié)構(gòu)如下:

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

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

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

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

lazy-component作為一個(gè)組件，給外部提供了一個(gè)回調(diào)事件（show），表示已經(jīng)開始load了，所以我們可以在外層監(jiān)聽這個(gè)事件：

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

我們來看一個(gè)做好的demo，這個(gè)demo還是以實(shí)現(xiàn)圖片懶加載為主。

=> lazy-component demo(二維碼)

注:lazy-component本身不能實(shí)現(xiàn)圖片懶加載，它只是實(shí)現(xiàn)組件懶加載，上面demo真正實(shí)現(xiàn)懶加載是因?yàn)橛昧藇-lazy。lazy-component有一個(gè)問題，就是它的上方必須要有東西，否則可能沒有效果，因?yàn)樗跈z測(cè)的時(shí)候有一個(gè)判斷：bottom>0，所以如果你在第一個(gè)元素使用lazy-component可能沒有效果。

以上是“vue-lazyload怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：vue-lazyload怎么用-創(chuàng)新互聯(lián)
當(dāng)前URL：http://chinadenli.net/article34/hpcpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、定制網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)