Lazyloading of Adsense ads

index.html

<ins class="adsbygoogle-lazy"
     style="display:block"
     data-ad-client="..."
     data-ad-slot="..."
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

lazy-adsense.js

function get_ad_observer() {
    if (window.ad_observer) {
        return window.ad_observer;
    }

    window.ad_observer = new IntersectionObserver(function (entries, observer) {
        [].forEach.call(entries, function (entry) {
            if (entry.isIntersecting) {
                observer.unobserve(entry.target);

                if (entry.target.classList.contains('adsbygoogle-lazy')) {
                    entry.target.classList.remove('adsbygoogle-lazy');

                    if (!entry.target.classList.contains('adsbyhb')) {
                        entry.target.classList.add('adsbygoogle');
                        (window.adsbygoogle = window.adsbygoogle || []).push({});
                    }
                }
            }
        });
    }, {
        rootMargin: "500px",  // config: load 500px before ad
    });

    return window.ad_observer;
}

function init_adsense_lazy_load(doc) {

    var ad_observer = get_ad_observer();

    // call this
    var ad_units = doc.querySelectorAll('.adsbygoogle-lazy');
    [].forEach.call(ad_units, function (entry) {
        ad_observer.observe(entry);
    });
}