過去都是使用 jquery lazy load js 來實作延遲載圖，
其運作原理是偵測scroll事件以及img物件的相對位置來決定要不要load圖片

現在有更簡單的方式，就是用 IntersectionObserver API 這個 Web標準
來偵測 img 物件是不是進入可視 webview 範圍
https://developers.google.com/web/updates/2016/04/intersectionobserver

document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));;

if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
     entries.forEach(function(entry) {
        if (entry.isIntersecting) {
         let lazyImage = entry.target;
         lazyImage.src = lazyImage.dataset.src;
         lazyImage.srcset = lazyImage.dataset.srcset;
         lazyImage.classList.remove("lazy");
         lazyImageObserver.unobserve(lazyImage);
        }
     });
    });

    lazyImages.forEach(function(lazyImage) {
     lazyImageObserver.observe(lazyImage);
    });
}
//這裡可以加上else處理萬一瀏覽器不支援的狀況
});

網頁裡面只要用  <img data-src='圖片網址' class='lazy' />  就可以啦

IntersectionObserver API
目前 Can I Use 網站顯示大部分 browser 都支援，iOS safari 要 12.2 版才支援
應該可以放心使用