[作業] 繳交 hw5

[fuchiao]

slack 帳號

zack

哪一個作業

5. 讓網頁變得更完整：加上 placeholder 與 infinite scroll

作業 Github 連結

https://github.com/zack1030/frontend-intermediate-course/tree/master/answers/hw5

作業 Github Page 連結

https://zack1030.github.io/frontend-intermediate-course/answers/hw5/

其他補充說明

[aszx87410]

在圖片還在載入的時候，會出現我作業說明裡面講的那種情形喔，只有文字沒有圖片

[fuchiao]

我用 windows10 的 chrome 複製不出來那種狀況 有什麼訣竅嗎？

[yuanyu90221]

@zack1030 我猜大概是你的preview的圖片 https://static-cdn.jtvnw.net/ttv-static/404_preview-320x180.jpg 用的是外部的url 所以 如果再比較網路比較慢的情況 基本上就會有load 比較慢的問題，可以試著把把圖片放在github上的ref這樣在html被render出來的時候，preview 的圖片就可以一起被載出來

[fuchiao]

從這邊的結果看起來，load 沒有慢到哪裡去，而且是跟 css 差不多時間開始 load 的

[yuanyu90221]

@zack1030 我的意思是比如透過比較慢的網路 因為github.io的domain跟 preview img的網域不同，所以會有loading 比較慢的情況 ，然後 這個作業要處理的事應該先把占位圖的大小事先設定好，因為如果不設定佔位圖的大小，在網路狀況良好的狀況下 比如有線網路，是看不出來有問題，但如果是用wifi 3G網路 非吃到飽專案的網路 在網路狀況不良好時，會有preview img還沒load好 以至於 沒有出現圖形render的狀況

[aszx87410]

@zack1030 想知道怎麼模擬，請收看今天的直播教學XD 我今天會提一下