圖片懶加載【1】: 使用vue-lazyload實現(xiàn)圖片懶加載

使用vue-lazyload實現(xiàn)圖片懶加載

1、安裝插件 cnpm install --save vue-lazyload

 cnpm install --save vue-lazyload

2、引入組件src/main.js

import VueLazyload from 'vue-lazyload'  // 圖片ngkm
Vue.use(VueLazyload, {
    preLoad: 1,                         //  完全顯示之后再加載
    error: require('@/assets/images/error.jpg'),
    loading: require('@/assets/images/loading.gif'),
    attempt: 1,                         // 嘗試加載次數(shù)
})

3、頁面中使用懶加載,把 :src 換成 v-lazy

<img  v-lazy="ele.url" alt="" />
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
禁止轉載,如需轉載請通過簡信或評論聯(lián)系作者。

相關閱讀更多精彩內容

友情鏈接更多精彩內容