Pasang Lazy Load Semua Iframe Seo Trik

Pasang Lazy Load Semua Iframe - Tutorial terpilih kali ini mengenai cara pasang lazy load semua iframe di blog. 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>

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>

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>

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>

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>

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>

Terimakasih sudah membaca artikel kami tentang Pasang Lazy Load Semua Iframe. Kami membuat postingan ini karena mungkin ada yang mencari informasi tentang pasang lazy load semua iframe html,pasang lazy load semua iframe php,pasang lazy load semua iframe laravel,pasang lazy load semua iframe javascript,pasang lazy load semua iframe di html,pasang lazy load semua iframe Smoga bermanfaat..