JavaScript30-Slide-in-on-Scroll-13

趁著這個週末，回去大學母校，
看著當時的隊友一個一個研究所即將畢業，
大家後來都繼續往數學發展，
但卻都面臨了一樣的困擾，

是不是要認自己的程式能力進步；真的喜歡寫程式嗎。

寫程式這件事情，好像真的像當時我剛踏入的這個領域時
前輩對我說的一樣：
你必須對他很有愛，一直追求自己追求新的技術，追求那些新知識。

一開始想說，是在公啥小，寫程式就寫程式，反正你一直寫到最後就會變反射動作，
看到需求東西就生出來。

但現實真的跟前輩們說的一樣，
不追求知識的人，到最後就是被淘汰，
當停滯不前時，有人慢慢的向前走就是落後了。

每想到這次看到大家我也說出一樣的話，
真的很有愛再來踏入這個領域，
當你不追求的時候，
就會失去報章雜誌給這個領域的光環，
就只是一個沒有創造力的工人，
隨著時間，跟上被淘汰的洪流之中，
希望 兩年後的我回來看會覺得自己得堅持很直得。

跟著大家說著職場的生活，
覺得跟去年的自己又更不一樣了
一年一年我相信自己是可以的。

跟著青春們從籃球聊到職場，聊到未來，再回到籃球。
青春，謝謝你們，讓我們一起加油。

13 - Slide in on Scroll

首次上傳：2020/10/25

主題

這篇介紹當滾動視窗到定點時動畫滑入圖片的效果，
而我在這裡替圖片增加了簡易的lazy load效果。

步驟

Step1. 基礎設定

作者已經在所有的圖片中加入了待會會用到的class :

1. align-right / align-left : 滑入效果用（左/右）
2. slide-in : JavaScript抓取用
   並已經將相關的動畫滑入效果寫好。

Step2. 建立觸發條件,並監聽滾動事件

目的是使滾動視窗到定點時顯示效果，
所以要監聽的是整個視窗，用window，事件選用scroll，
但是如果單純使用scroll來操作的話，每次的畫面滾動都會有大量事件被觸發，
會對效能上造成影響，所以作者多寫了一個debounce來使觸發間隔為20毫秒以上：

function debounce(func, wait = 20, immediate = true) {
    var timeout;
    return function () {
    var context = this, args = arguments;
    var later = function () {
        timeout = null;
        if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
    };
}

所以監聽事件就會寫成window.addEventListener('scroll', debounce(checkSlide));。

Step3. 設定觸發後的事件內容

在一開始先取得所有.slide-in的圖片元素，使用querySelectorAll，

const sliderImages = document.querySelectorAll('.slide-in');

接著編寫每次scroll處發的checkSlide function:

function checkSlide() {
    sliderImages.forEach(sliderImage => {
        // 取得圖片1/2高度的定位點（卷軸垂直位移量＋視窗高度）- 1/2圖片高度
        const slideInAt = (window.scrollY + window.innerHeight) - (sliderImage.height / 2);
        // 取得圖片底部定位點（利用圖片頂部定位點+圖片高度取得）
        const imageBottom = sliderImage.offsetTop + sliderImage.height;
        // 判斷視窗是否已經超過圖片高度一半
        const isHalfShown = slideInAt > sliderImage.offsetTop;
        // 判斷滾動範圍是否已經超過圖片底部（卷軸垂直位移量）
        const isNotScrolledPast = window.scrollY < imageBottom;
        // 判斷是否超過圖片一半高，且視窗尚未超過圖片底部來增加或移除css效果
        if (isHalfShown && isNotScrolledPast) {
          sliderImage.classList.add('active');
        } else {
          sliderImage.classList.remove('active');
        }
    });
}

探索

學會了抓取視窗高度並當滾動至對應位置時載入/移除動畫效果，
就想來試試看增加一個功能，當到對應位置時，才去做圖片的載入及動畫效果，
就是lazyload的很簡易版應用，套用在這個練習上。

首先先把每個圖片改為用data-imglink來放圖片連結，像是這樣

<img src="" data-imglink="http://unsplash.it/400/401" class="align-right slide-in">

接著來修改觸發的事件內容，因為原本的寫法只要重新讀到圖片1/2位置就會觸發，
我要做的只要第一次觸發效果就好，且是在讀取圖片頂端時觸發，
所以修改如下，新增的用備註註明：

function checkSlide(e) {
    sliderImages.forEach(sliderImage => {
    // 取得圖片的定位點
    const slideInAt = (window.scrollY + window.innerHeight) - (sliderImage.height);
    // 判斷是否滾動到圖片的頂端
    const isImgTop = slideInAt > sliderImage.offsetTop;
    
    if (isImgTop) {
        // 透過dataset取得html裡面的data-imglink連結
        const imageLink = sliderImage.dataset.imglink;
        // 用setAttribute來設置取得的連結
        sliderImage.setAttribute('src', imageLink);
        // 增加一個事件，當圖片載入完成後套用css的動畫效果
        sliderImage.addEventListener('load', () => {
            sliderImage.classList.add('active');
        });
    }
    })
}

JavaScript語法備註

Window.scrollY
目前瀏覽器視窗已滾動的Y軸（垂直位置）

參閱：MDN-Window.scrollY

Window.innerHeight
目前瀏覽器視窗的高度

參閱：MDN-Window.innerHeight

HTMLElement.offsetTop
返回指定元素相對於有父元素(offsetParent)中的頂端位置，
以此練習來說，sliderImage的父元素就是window。

參閱：MDN-Window.innerHeight

HTMLElement.dataset
透過dataset可以取回在HTML中設置的data-*內容，
注意使用dataset時property不用再將加上data-開頭，例如：

<div class="test" data-greet="hi"></div>

document.querySelector('.test').dataset.greet; // hi

參閱：MDN-HTMLElement.dataset

Q&A

what are Throttling and Debounce different
Throttling像是給固定時間去刷新事件，
例如每20ms都要強制去刷新事件，可以避免視覺上效能問題。
例如事件因為太快而不出現。
Debounce
想象一個進電梯的場景，你走進了電梯，門剛要關上，這時另一個人想要進來，於是電梯沒有移動樓層（處理函數），而是將門打開讓那個人進來。這時又有一個人要進來，就又會上演剛才那一幕。也就是說，電梯延遲了它的函數（移動樓層）執行，但是優化了資源。

你可以看到連續快速事件是怎樣被一個單獨的 debounce 事件所替代的。但是如果事件觸發時間間隔較長，就不會發生 debounce。

[DEMO]