iT邦幫忙

2021 iThome 鐵人賽

1
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題!系列 第 34

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

大家好!

各位知道 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');
        });
    });
});

實測

範例連結製作中。


差不多也到尾聲了。
如果對文章有任何疑問,也歡迎在下方提問和建議!
我是 Felix,我們明天再見!


上一篇
JS 33 - 在觸控裝置偵測手勢的滑動方向!
下一篇
JS 35 - 用 input 選擇圖片後顯示預覽圖
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46

尚未有邦友留言

立即登入留言