Lastor
coding 累，研究 img skeleton loading 弄到剛剛
Lastor
其實沒被要求做到這份上，但就是好奇到底要怎麼做......
Lastor
之前有一個專案是 Preact 環境，在那裡面做過一次，那時手持前端框架操縱 DOM 的力量
Lastor
但這次是做 PHP 後端模板渲染，就想盡辦法不寫 js 實現
Lastor
其實 skeleton 更多是 CSS 的工，但需要 js 去控制 img onload 之後，把 skeleton 隱藏，這個 CSS 沒辦法監控 onload
Lastor
反正嘗試過後，大概找到了一個方法，雖然是有依靠其他套件的力量啦。一個是 vanilla-lazyload
GitHub - verlok/vanilla-lazyload: LazyLoad is a ligh...
Lastor
要做 img 的 loading UI，勢必會拉一些套件來做 lazyload，而這類套件其實都會幫忙打一些 class，像是這套在圖片讀取之後會加上一個 loaded class
Lastor
就可以利用這個 flag 省去自己寫 js 監聽 onload 的工
Lastor
另一個是起到很大幫助的是 WindiCSS 跟 Tailwind 有一個自帶的動畫 animate-pulse
Animation - Tailwind CSS
Lastor
有這個就省下非常多力氣，剩下的只要花時間去填充 skeleton 的寬高，還有 RWD 就完事了
Lastor
最初是想嘗試能不能在父層加一個 class name，透過偽元素之類的全部搞定
Lastor
但實在很難...... 每個不同區塊長寬比都不太一樣，不可能靠一組 style 屬性全部共用
Lastor
這樣做著做著，就覺得還是 Vue、React 方便，直接打個組件帶參數設定，就可以大量複用了 
Lastor
只是 skeleton loading 這玩意，挑戰了兩次之後，覺得做這個真的會多花很多時間。而效果好不好其實不好說......
Lastor
至少以我們家的 Server 來說，其實讀圖不算慢，skeleton loading 做半天，實際上線之後，在畫面上頂多出現不到一秒就消失了，一整個做辛酸的
Lastor
而且我覺得其實很少有 user 真的會去在意讀取資料或圖片之後，UI 跳動的問題
Lastor
這很大程度感覺只是為了那甚麼頁面友好度測分可以拿高點分而已 
Lastor
跟單元測試也有個甚麼覆蓋率一樣，有個那種數據出來，就會強迫症病發想拚高分
Lastor
總覺得這勞心程度，CP 值有點不划算
doomleika
你們不能用GraphQL這類東西拆前後端嗎
doomleika
兩邊混在一起很容易會有奇怪的情況
Lastor
doomleika
: 不太懂，混在一起是說前後端混合? 現在做的這個頁面是純後端 SSR，沒有前後端分離的
Lastor
話說 GraphQL 這玩意雖然沒用過，但好像在前端不太受歡迎的樣子，之前粗略查了一下，似乎後端跟後端之間比較流行用這個
Lastor
而且我這個是在處理 img loading 時的 placeholder 佔位問題，這應該跟前後端工程甚麼的沒太大關係，純粹 UI 的活