JS 34 - 實作 Medium 的漸進式圖片載入效果 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

Modern Web

JavaScript 從 50% 開始，打造函式庫不是問題！系列第 34 篇

JS 34 - 實作 Medium 的漸進式圖片載入效果

13th鐵人賽

Felix

2021-10-19 23:59:13

1981 瀏覽

分享至

大家好！

各位知道 Medium 的圖片載入效果嗎？
就是先模糊圖片，等到載入完成再將圖片轉為清晰的那個效果。
我們今天就是要實作這個。

程式碼

window.addEventListener('load', function () {
    const imgs = Felix('img');
    Felix.forEach(imgs, function (img) {
        img.src = img.dataset.src;
        img.addEventListener('load', function () {
            this.classList.add('loaded');
        });
    });
});