lazyload iframe komentar blogger
Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat lazyload pada iframe komentar blogger.
untuk mengakali agar javascript pada iframe komentar blogger tidak terdeteksi di pageSpeed insight menambahkan class lazy pada iframe atau loading='lazy' itu tidak ada efek apa - apa.
karena sebelumnya saya sendiri sudah mencobanya dan dari pengamatan saya itu src pada iframe di tambahkan secara otomatis walau tidak menggunakan class lazy dan attribute src di hapus sekalipun browser tetap akan menambahkannya.
kali ini saya mendapatkan ide untuk mengubah tag IFRAME pada komentar blogger menjadi tag DIV, lalu saya akan mengubahnya dengan javascript agar tag div tersebut menjadi iframe setelah halamam di gulir.
cara ini ampuh agar browser tidak menambahkan src secara otomatis ke dalam IFRAME karena kita mengubahnya menjadi DIV, untuk melihat hasilnya silakan kalian klik disini untuk melihat performa blog ini.
Lazyload Iframe Komentar Blogger
tahap pertama kalian ubah tag IFRAME komentar blogger menjadi DIV sehingga tampak seperti ini.
<div class='blogger-iframe-colorize blogger-comment-from-post' expr:data-src='data:post.commentFormIframeSrc appendParams {skin: "contempo"}' id='comment-editor' name='comment-editor' title='Blogger comment'></div>lalu carilah kode seperti dibawah ini
<script src='https://www.blogger.com/static/v1/jsbin/1875144490-comment_from_post_iframe.js'/>
<script>BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');</script>jika sudah ketemu ganti kode tersebut dengan kode yang saya berikan di bawah ini.
<b:if cond='data:view.isSingleItem'>
<script>/*<![CDATA[*/
/* lazyload iframe komentar blogger by www.wendycode.com */
let commentLazy = false;
window.addEventListener('scroll', () => {
(0 != document.documentElement.scrollTop && false === commentLazy || 0 != document.body.scrollTop && !1 === commentLazy) && (! function() {
var scriptCJs = document.createElement('script');
scriptCJs.src = 'https://www.blogger.com/static/v1/jsbin/157798655-comment_from_post_iframe.js';
document.body.appendChild(scriptCJs);
scriptCJs.addEventListener('load', function() {
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
});
var dvCmEdtr = document.getElementById('comment-editor');
var iframeCm = document.createElement('iframe');
iframeCm.setAttribute('data-src', dvCmEdtr.getAttribute('data-src'));
iframeCm.src = dvCmEdtr.getAttribute('data-src');
iframeCm.className = dvCmEdtr.className;
iframeCm.id = dvCmEdtr.id;
iframeCm.name = dvCmEdtr.getAttribute('name');
iframeCm.title = dvCmEdtr.getAttribute('title');
setTimeout(function() {
dvCmEdtr.parentNode.replaceChild(iframeCm, dvCmEdtr);
}, 1000);
}(), commentLazy = true);
}, true);
/*]]>*/</script>
</b:if>
kalian juga bisa aplikasikan dengan script lazyload asynchronous jika ingin menggunakan localStroge pada lazyload.
ok jadi sekian lazyload iframe komentar blogger yang bisa saya bagikan kali ini, terima kasih telah berkunjung dan semoga bermanfaat.
26 komentar
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6nabWbNpGqPsazgrnZ4Bi-m8UCDHVHczk3MNtG5bKanS8t7DSKi5UCfAIrr46_AcW4mTfAtTYqq6cRkZmWdn7y_a-TNDd08ZR2GPA4D9P7p_ATq5x3BCPixS_vTBxxuAi5ZRJersWQ04Sp-GVtxioYuECmhMGZbQJGkiRs06HDqUoNclENdCmK-GoJQ/s1600/IMG_20230509_034410.jpg
var l = $(e).parent().find("#postviews").addClass("view-load"),
i = new Firebase("ID FIREBASE DISINI/pages/id/" + $(e).attr("data-id"));
i.once("value", function(a) {
var n = a.val(),
t = !1;
null == n && (n = {}, n.value = 0, n.url = window.location.href, n.id = $(e).attr("data-id"), t = !0), l.removeClass("view-load").text(n.value), n.value++, "/" != window.location.pathname && (t ? i.set(n) : i.child("value").set(n.value))
})
});
var newValue = value;
if (value >= 1000) {
var suffixes = ["", "k", "M", "B","T"];
var suffixNum = Math.floor((""+value).length/3);
var shortValue = '';
for (var precision = 2; precision >= 1; precision--) {
shortValue = parseFloat((suffixNum != 0 ? (value / Math.pow(1000,suffixNum) ) : value).toPrecision(precision));
var dotLessShortValue = (shortValue + '').replace(/[^a-zA-Z 0-9]+/g,'');
if (dotLessShortValue.length <= 2) { break; }
}
if (shortValue % 1 != 0) shortValue = shortValue.toFixed(1);
newValue = shortValue+suffixes[suffixNum];
}
return newValue;
}
// contoh penggunaan
console.log(abbreviateNumber('2400'))
// pada variabel value misalnya
var value = '2400';
console.log(abbreviateNumber(value))
setTimeout(function(){
//js balas komentar
}, 1000);
<b:if cond='data:post.allowNewComments'>
<script>/*<![CDATA[*/ document.addEventListener("DOMContentLoaded", function() { var a=document, b = a.getElementById("comment-editor"), d = b.getAttribute("data-src"); if (b.setAttribute("src", d), 1 == comment) { var f = a.getElementsByClassName("rpT"), c = a.getElementById("commentForm"), h = f.length, k = function(b, d, e, f) { b.addEventListener("click", function() { var c = b.getAttribute("data-reply-to"); a.getElementById("c" + c).appendChild(d); a.getElementById("commentForm").className = "cmX"; a.getElementById("cmAd").className = "cmD cmButton"; e.src = f + "&parentID=" + c }) }; for (i = 0; i < h; i++) k(f[i], c, b, d); var l = a.getElementsByClassName("cmF")[0]; a.getElementById("cmAd").addEventListener("click", function() { l.appendChild(c); a.getElementById("commentForm").className = "cmX"; a.getElementById("cmAd").className = "cmD hidden"; b.src = d }) } }); /*]]>*/</script>
</b:if>
Lakukan intruksi yang saya sebutkan diawal
getElementById("cmAd").addEventListener("click", function() { l.appendChild(c); a.getElementById("commentForm").className = " cmX"; a.getElementById("cmAd").className = "cmD hidden"; b.src = d }) } }); /*]]>*/
the iframe disappears after replacing iframe to div...