2019年4月10日 星期三

web 原生的 lazy-loading

以往我們想用圖片緩讀的話都會掛一隻 lazyload 的 js,現在 Chrome 宣布在版本 75 將有機會直接用 web 原生作照片緩讀的功能。

要用 web 原生的緩讀功能,只要加上 loading="lazy" 就好了,比如下面的寫法
...


loading 可以使用的屬性有以下幾種:
lazy: 也就是照片緩讀
eager: 不建議用這個,這也就是原本的瀏覽器行為
auto: 讓瀏覽器去偵測要用哪一種方法

如果怕瀏覽器還沒支援,則可以使用以下方法去偵測是否要讀原本的那隻 lazyload 的外怪
if ('loading' in HTMLImageElement.prototype) { 
    // Browser supports `loading`..
} else {
   // Fetch and apply a polyfill/JavaScript library
   // for lazy-loading instead.
}

示範
..


..
..
..
(async () => {
    if ('loading' in HTMLImageElement.prototype) {
        const images = document.querySelectorAll("img.lazyload");
        images.forEach(img => {
            img.src = img.dataset.src;
        });
    } else {
        // Dynamically import the LazySizes library
        const lazySizesLib = await import('/lazysizes.min.js');
        // Initiate LazySizes (reads data-src & class=lazyload)
        lazySizes.init(); // lazySizes works off a global.
    }
})();

參考:
Native image lazy-loading for the web!

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...