Pasang Lazy Load Semua Iframe

Oleh Diposting pada

Kami membuat postingan tentang cara pasang lazy load semua iframe di blog karena mungkin ada yang mencari informasi pasang lazy load semua iframe dengan mudah untuk di pasang di blog.

Tutorial cara pasang lazy load semua iframe di blog bisa kalian pasang di blog mengunakan beberapa kode sederhana di bawah ini. Kode yang di butuhkan untuk pasang lazy load semua iframe hanya perlu copy paste dari postingan ini. Tanpa basa basi berikut tutorial cara pasang lazy load semua iframe di blog.

Membuat Lazy Load Semua Iframe

Seperti biasa sebelum menerapkan Lazy Load Semua Iframe di blog, alangkah baiknya berjaga-jaga kalau terjadi kesalahan dengan membuat “Cadangan Template”. Lalu pada “edit html” salin kode Script Lazy Loading Iframe di bawah ini dan letakkan tepat di atas kode </body>.

Script Lazy Loading Iframe

Silahkan copas code java script Syntax highlighter berikut dan letakkan di atas kode </body>. 


<script type="text/javascript">//<![CDATA[
    document.addEventListener("DOMContentLoaded", function () {
        if ("IntersectionObserver" in window) {
            var iframes = document.querySelectorAll("iframe.iframes-lazyload");
            var iframeObserver = new IntersectionObserver(function (entries, observer) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting && entry.target.src.length == 0) {                    
                        entry.target.src = entry.target.dataset.src;
                        iframeObserver.unobserve(entry.target);
                    }
                });
            });
            iframes.forEach(function (iframe) {
                iframeObserver.observe(iframe);
            });
        } else {
            var iframes = document.querySelector('iframe.iframes-lazyload');
            for (var i = 0; i < iframes.length; i++) {
                if (lazyIfrm[i].getAttribute('data-src')) {
                    lazyIfrm[i].setAttribute('src', lazyIfrm[i].getAttribute('data-src'));
                }
            }
        }
    })
//]]></script>

Langkah berikutnya install atau pasang kode css Lazy Loading Iframe ke dalam template blog anda, copas kode CSS Lazy Loading Iframe di bawah ini dan letakkan tepat diatas kode ]]></b:skin>

CSS Script Lazy Loading Iframe



<style>
    .cordial-iframe-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
    }
    .iframe-style {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
  </style>

Jika Js dan css Lazy Loading Iframe sudah tepat di letakkan di letakkan seperti tutorial diatas, selanjutnya silakan klik simpan. Kemudian saatnya menerapkan di “html” blog. Berikut ini kode html Lazy Loading Iframe untuk di terapkan di blog.

HTML Lazy Loading Iframe

Penerapan Kode HTML Lazy Loading Iframe dalam postingan blog. Caranya silahkan copas kode di bawah ini lalu letakan dalam postingan pada “mod html”. Ingat ya! Dalam “mod html”. Di bawah ini kode dan contoh penerapan di dalam postingan blog.

HTML Lazy Loading Iframe CodePen.io


<div class="cordial-iframe-container">
<iframe class="iframe-style iframes-lazyload" title="#PureCSS - Fashion Woman" data-src="https://codepen.io/AsyrafHussin/embed/jOZaNVE?default-tab=html%2Cresult" frameborder="0" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AsyrafHussin/pen/jOZaNVE">
  #PureCSS - Fashion Woman</a> by Asyraf Hussin (<a href="https://codepen.io/AsyrafHussin">@AsyrafHussin</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>
</div>

Demo

HTML Lazy Loading Iframe JsFiddle.net


<div class="cordial-iframe-container">
<iframe class="iframe-style iframes-lazyload"
     data-src="//jsfiddle.net/p3rtLw7q/embedded/html,css,result/"
     allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0">
</iframe>
</div>

Demo

HTML Lazy Loading Iframe Facebook


<div class="cordial-iframe-container">
    <iframe class="iframe-style iframes-lazyload" 
        data-src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2FOtomologi%2Fvideos%2F329136169074127"
        frameborder="0"
        allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
        allowfullscreen></iframe>
</div>

Demo

HTML Lazy Loading Iframe YouTube


<div class="cordial-iframe-container">
    <iframe class="iframe-style iframes-lazyload" 
        data-src="https://www.youtube.com/embed/IWeMyNW2bYo"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
</div>

Demo

HTML Lazy Loading Iframe Audio Player



<div class="cordial-iframe-container">
    <iframe class="iframe-style iframes-lazyload" 
        data-src="https://drive.google.com/file/d/1XcG5vGKQmapAZBQW9yTI901-XBzGBpo8/preview?usp=sharing"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
</div>

Demo

HTML Lazy Loading Iframe Dailymotion


<div class="cordial-iframe-container">
    <iframe class="iframe-style iframes-lazyload" 
        data-src="https://www.dailymotion.com/embed/video/x88xbkj"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
</div>
Demo

Posting terkait: