引言：
作為一名web前端工程師，不僅需要有過硬的開發能力，更需要有強大的用戶體驗意識，
可視化頁面是與用戶互動的直接媒介！前端工程師的價值，本人認為主要體現在互動！
概念：
1.什么是圖片懶加載？
顧名思義，圖片懶加載針對的物件是圖片，圖片是一種多媒體資源，在加載程序中會消耗較多的網路資源，
通常對于圖片的優化主要是降低圖片質量以保證檔案足夠小，要么利用base64格式進行壓縮，可是這么做治標卻不治本！
懶加載的核心是“懶”！也就是說，需要你的時候你給我出現，沒到你表現的時候給我休眠！
2.為什么需要圖片懶加載？
web資源的加載速度，不光能夠影響用戶體驗感，還能夠優化SEO，并且在一定程度上能夠滿足開發者的成就感，
如今的電商網站可以說是千千萬萬，各個大型電商網站的商品頁串列資料，在一定程度上達到了海量資料的級別，
如果我們在一個頁面加載程序中去請求串列資料，得到的圖片數量也是比較龐大的，這對瀏覽器渲染帶來了不小的壓力，
那么，圖片懶加載，就成為了緩解這種壓力最適合的解決方案！并且在vue專案中，存在很方便的插件vue-lazyload可以使用，
應用：
1.安裝vue-lazyload：
非常方便，只需要在vue專案中安裝vue-lazyload：
npm i vue-lazyload -S
2.引入vue-lazyload：
找到專案中的main.js，引入以下代碼：
import lazyLoad from 'vue-lazyload' /* 引入vue-lazyload用 */ Vue.use(lazyLoad); /* 注冊lazyLoad */
3.簡單使用vue-lazyload：
我們使用v-lazy屬性進行圖片引入，回圈36個：
<img v-lazy="require('../assets/3016328129_14.jpg')" v-for="(item,index) in 36" :key="index" />
4.實作效果：
如下圖，右邊滑動條只有這么一點，我們往下滑動，會加長，這就是懶加載！
補充：
1.配置擴展：
我們可以配置加載中的圖片和加載失敗顯示的圖片，
Vue.use(lazyLoad, { error: require('./assets/error.png'), //圖片路徑錯誤時加載圖片 loading: require('./assets/loading.png') //預加載圖片 });
還可以配置其它項，以下是參考檔案：https://www.w3cschool.cn/vantlesson/vantlesson-tsou35w1.html
2.樣式擴展：
/* 加載時 */
img[lazy="loading"] { width: 373px; height: 266px; background: #ddd; }
/* 加載失敗 */
img[lazy="error"] { width: 373px; height: 266px; background: red; }
/* 加載后，沒理解，但剛進入頁面時有一瞬間是這個效果 */ img[lazy="loaded"] { width: 373px; height: 266px; background: green; }
原創地址：https://www.cnblogs.com/ElemSN/p/13494926.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/5446.html
標籤：JavaScript
上一篇：關于js中"window.location.href"、"location.href"重定向
下一篇：echart 踩坑記錄