前端項目中,圖片的加載也是一個比較重要的點狭握。優(yōu)化的方向,大都在加載方式和加載過程上胚想。加載方式也都是在懶加載的方式于微,但在加載過程中,似乎方式是更多樣化的育瓜。包含:加載圖片分為本地圖片和遠程圖片葫隙。加載前的默認占位圖片,加載過程中的動畫或是異步同步處理躏仇,以及加載出錯的處理等恋脚。
?????? 好吧,廢話不多說了焰手。理論再多糟描,其實正文就是在使用別人造好的輪子。el-image這個標簽书妻,在element-UI的2.72版本之前是沒有的船响。在2.8之后加入的。主要多了一個懶加載和預覽的功能躲履。在加載前和加載時處理的很粗糙见间。
先在node_modules下找到element-UI源碼包
?
在element-UI下找到el-image的包
?
源碼分為兩個部分:
?
在main.vue中可以看到
?
在加載前和加載中是一個類名為el-image__placeholder的div標簽,在加載后和加載出錯后分別是一個div和img標簽
那么在加載前和加載后的樣式更改工猜∶姿撸可以重寫覆蓋類名el-image__placeholder和el-image__error來自定義了。