如何進(jìn)行v lazy圖片懶加載的安裝使用

發(fā)布時間：2021-10-13 09:31:21 來源：億速云閱讀：380 作者：柒染欄目：開發(fā)技術(shù)

如何進(jìn)行v lazy圖片懶加載的安裝使用，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

　　vue基于vue-lazyload圖片懶加載、延遲加載vue-lazyload插件效果是默認(rèn)不加載圖片。

　　vlazy圖片懶加載安裝插件

　　npminstallvue-lazyload--save-dev

　　在入口文件main.js中引入并使用

　　importVueLazyloadfrom'vue-lazyload'

　　Vue.use(VueLazyload,{

　　loading:require('img/loading.png'),//加載中圖片，一定要有，不然會一直重復(fù)加載占位圖

　　error:require('img/error.png')//加載失敗圖片

　　});

　　修改圖片顯示方式為vlazy圖片懶加載

　　img:

　　<imgv-lazy="'/static/img/'+item.productImage":key="'/static/img/'+item.productImage">//將:src屬性直接改為v-lazy,:key是為了防止刷新頁面或圖片更改時圖片不更新

　　背景圖:

　　<divv-lazy:background-image="{src:item.imgpath}"></div>

　　v-html，如從后臺獲取的富文本字符串中圖片:（用replace將src替換為data-src）

　　<divv-lazy-container="{selector:'img',error:'xxx.jpg',loading:'xxx.jpg'}">

　　<imgdata-src="//domain.com/img1.jpg">

　　<imgdata-src="//domain.com/img2.jpg">

　　<imgdata-src="//domain.com/img3.jpg">

　　</div>

看完上述內(nèi)容，你們掌握如何進(jìn)行v lazy圖片懶加載的安裝使用的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

猜你喜歡