Frontend Intermediate Course - 作業五與直播筆記

作業五的 GitHub 連結：讓網頁變得更完整：加上 placeholder 與 infinite scroll

如果說作業四是是越級打怪，這次的作業讓我覺得是裝備很差的情況下要打大魔王。இдஇ

因為連從哪裡努力起都沒有頭緒，一般的線上課程不太會講到這個部分，google 搜尋也不知如何搜尋起，雖然找到幾篇 Stack Overflow 有提到 placeholder，但是我也不知道怎麼應用在我的作業上。上 PTT 有找到一個人放在 CodePen 上的 placeholder 例子，但是也是有看沒有懂。關於 infinite scroll，雖然胡立老師有放一篇關鍵的文章，但是不知道為什麼我就是沒辦法在捲軸捲到底的時候載入新的資料，所以從頭卡到尾，嚴重卡關。

想說那去偷看其他同學的作業，看看能不能至少有個頭緒，結果 JavaScript 技能點數還不夠，連想偷看也看不懂 XD

本來想要跟胡立老師求救，當他知道我超級卡關之後就說「那就到時候看解說吧，聽完解說之後會海闊天空，想說怎麼那麼簡單」。當時半信半疑，我應該是裡面最菜的了，其他人都有一些程式的基礎，好幾個同學也覺得這次作業難度很高，連其他人都覺得有難度，那我這麼菜怎麼可能解得出來，然後就看開了（？ 於是就放棄嘗試，繼續去做 FreeCodeCamp 的題目了...


然後看完胡立老師的直播解說之後，覺得「真的比想像中的簡單很多」，雖然如此，沒有被點破還是不得要領啊！最厲害的人就是用很簡單的方法做看起來很困難的事情～

胡立老師的直播：
5. 讓網頁變得更完整：加上 placeholder 與 infinite scroll（上）
5. 讓網頁變得更完整：加上 placeholder 與 infinite scroll（下）

以下是直播的筆記。

1. 用 Chrome DevTools 模擬不同網路速度。
在 Chrome DevTools 裡面的 Network -> No throttling 底下可以選擇不同網路速度，因為作業要看佔位圖的 placeholder 有沒有顯示出來，在較慢的網路速度下比較容易看，所以這個功能好厲害啊～

2. placeholder 的做法：
1) 放兩張圖片（一張真圖片、一張佔位圖）在同一個 div、同一個位置，並把 placeholder 的 position 設為 absolute。

2) 讓真的圖片蓋掉 placeholder：把真圖片的 position 設成 relative，或是設定 z-index。

3) 在 CSS 中把真圖片透明度設成 0，等真的圖片載入完成（onload）之後，再把透明度設成 1。在 HTML 中設成：

<img src="..." onload="this.style.opacity=1">

4) 利用偽元素 ::before 取代佔位圖的 div，並設定 ::before 的 content:""。

3. 利用 base64 縮短佔位圖下載時間：
下載 HTML 時，base64 也包含在裡面，所以一開網頁就可以用那張圖，但缺點是圖片大小會變大，約增加 1.5 倍。IE8 有限制 data URL 只能放到 32KB，一般而言，太大的圖片也不會使用 base64。

4. infinite scroll 的做法：
1) 先呼叫出 scroll 事件：

$(window).scroll(function() {
     //do something...
});

2) 在 scroll 事件裡判斷捲軸是否捲到底：

if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
     //do something...
}

$(document).height() 是整個網頁的高度
$(window).height() 是目前視窗的高度
$(window).scrollTop() 是計算整個網頁最上方與視窗最上方之間的距離，卷軸在最上方為0，捲軸往下捲會增加距離。

3) 加入 boolean 變數 isLoading，以避免重複發出多次 request。

4) 管理 API 的 offset 參數，所以每次都抓取新的資料。

5. 後來有另外問胡立老師關於宣告變數 var、const、跟 let 的差別。
依據 scope 可分為：
function -> var
block -> const, let

依據可不可以改變變數的數值分為：
可變 -> let
不可變 -> const


看完直播後總算知道怎麼做作業了，不過也是問了胡立老師不少問題之後才總算把作業做完。中間卡住一直找不出原因，後來是因為我把 append 移到另一個函式裡，return 之後換行所以導致 return undefined，胡立老師解答用 return '' + 再換行接就可以解決了，實在太波折太煎熬我太弱了嗚嗚嗚 QAQ


最後附上這次作業的 CodePen：

See the Pen HW_5 by Peggy (@pychiang) on CodePen.

作業六是 Vanilla JavaScript 啊 QWQ