餓了么H5站那個佔位的base64圖片是如何生成的啊？

12-27

看到餓了么的H5站點，上面首次載入數據還沒回來時候用的一些base64的圖片進行佔位，可以有效的防止數據回來後頁面發生重排。
想請教下這個base64的圖片是怎麼做的啊，後端生成的嗎？怎麼能做到生成跟ajax返回的圖片占的大小一模一樣啊，有沒有大神給解釋下

PS:下面有些答案有些不明所以，可能是我沒講清楚，我的意思是我看他前端是以rem為單位的，那麼服務端生成這張svg圖時候怎麼才能保證這張圖和前端二次渲染完成之後的div大小一樣

瀉藥~
這叫做 App Shell，是餓了么手機版改造 PWA 時加入的。製作很簡單，Sketch 畫個 SVG 就行了。關鍵在於與 Vue 的 prerender 結合，在編譯階段就被插入。

下面有請作者登場 @王亦斯

利益相關………行了我編不下去了

你都知道是 base64 了。。。還想問什麼。。。大小的話，當然是寫在 CSS 里的~~
你還是多補一補 JavaScript 和 CSS 基礎吧。

難道不是一張靜態圖片而已？

webpack打包自動生成的吧。webpack用nodejs把圖片轉成base64編碼

雖然不知道ajax返回圖片的物理大小，但寬高是可以提前預知的。至於圖片，你把地址複製出來，在瀏覽器打開一下就知道前後端哪裡生成的，按經驗是後端