.wendyThumb{background:#f09800;position:absolute;top:1%;bottom:1%;left:0;right:0;border-radius:10px}
.wendyPreloader{overflow:hidden;left:0;right:0;top:0;bottom:10%;margin:auto;position:absolute;z-index:1;text-align:center}
.wendyspinner{list-style:none;padding:0;left:0;right:0;top:0;bottom:0;margin:auto;position:absolute}
.wendyloader{display:inline-block;width:20px;height:20px;border-radius:5px;position:relative;overflow:hidden;border:2px solid rgba(255,255,255,.85);top:50%;animation:wendyloader 2s infinite ease}
.wendy-load-inner{vertical-align:top;display:inline-block;width:100%;background-color:rgba(255,255,255,.85);animation:wendy-load-inner 2s infinite ease-in}
@keyframes wendyloader{0%{transform:rotate(0deg)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}@keyframes wendy-load-inner{0%{height:0%}25%{height:0%}50%{height:100%}75%{height:100%}100%{height:0%}}
salin javascript dibawah ini pasang diatas /body
<script>
//<![CDATA[
function LazyOnScroll() {setTimeout(function() {function lazyLoad() {for (var e = document.getElementsByClassName("lazy"), t = 0; t < e.length; t++) isInViewport(e[t]) && (e[t].src = e[t].getAttribute("data-src"));} function isInViewport(e) {var t = e.getBoundingClientRect(); return t.top <= (window.innerHeight || document.documentElement.clientHeight) && t.bottom >= 0 && t.left <= (window.innerWidth || document.documentElement.clientWidth) && t.right >= 0} function registerListener(e, t) {window.addEventListener ? window.addEventListener(e, t) : window.attachEvent("on" + e, t)} registerListener("load", lazyLoad), registerListener("scroll", lazyLoad), document.addEventListener("DOMContentLoaded", function () {"use strict"; for (var e = document.querySelectorAll("a"), t = e.length, n = /firefox|trident/i.test(navigator.userAgent) ? document.documentElement : document.body, i = function (e, t, n, i) {return (e /= i / 2) < 1 ? n / 2 * e * e * e + t : n / 2 * ((e -= 2) * e * e + 2) + t}; t--;) e.item(t).addEventListener("click", function (e) {var t, o = n.scrollTop, r = document.getElementById(/[^#]+$/.exec(this.href)[0]).getBoundingClientRect().top, d = n.scrollHeight - window.innerHeight, a = d > o + r ? r : d - o, c = 900, s = function (e) {t = t || e; var r = e - t, d = i(r, o, a, c); n.scrollTop = d, c > r && requestAnimationFrame(s)}; requestAnimationFrame(s), e.preventDefault() }) }); },1000) } window.addEventListener ? window.addEventListener("load", LazyOnScroll, !1) : window.attachEvent ? window.attachEvent("onload", LazyOnScroll) : window.onload = LazyOnScroll;
//]]>
</script>
jika ingin mengaktifkan lazyload pada halaman/postingan dan artikel bisa tambahkan javascript ini diatas /body
<b:if cond='data:view.isPost'><script>/*<![CDATA[*/ var lzy = document.getElementById('post-body'); var imagesl = lzy.getElementsByTagName('img'); for(var i = 0; i < imagesl.length; i++) {var currentSrc = imagesl[i].getAttribute('src'); imagesl[i].setAttribute('src','data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAAPSURBVCiRY2AYBaOACgAAAkkAAeA86/QAAAAASUVORK5CYII='); imagesl[i].setAttribute('loading','lazy'); imagesl[i].setAttribute('data-src',currentSrc); imagesl[i].className += ' lazy';};/*]]>*/</script></b:if>
lanjut cari serupa/mirip atau mirip dibawah inisetiap templete memiliki kode yang berbeda atau kode yang serupa
<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 225, "225:170")'/>
sudah ketemu ? - tambahkan tag class="lazy" pada tag imagenya - ubah expr:src menjadi expr:data-src - tambahkan src dan value nya di isi dengan data:image /png;base64 ,R0lGODlhAQABAAD /ACwAAAAAAQ ABAAACADs= - dan tambahkan tag html ini <div class='wendyPreloader'><div class='wendyspinner'><span class='wendyloader'><span class='wendy-load-inner'/></span></div></div><span class='wendyThumb'/> sebelum tag <img sehingga hasilnya akan tampak seperti di bawah ini
<div class='wendyPreloader'><div class='wendyspinner'><span class='wendyloader'><span class='wendy-load-inner'/></span></div></div><span class='wendyThumb'/><img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 225, "225:170")' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
Cara Menggunakan Source Code
CSS tempat nya di dalam tag <style> atau <b:skin>. Contoh:
<style>
/* CSS tempel di sini */
</style>
Javascript biasa nya di letakkan di atas tag </body> Contoh:
<script type='text/javascript'>/*<![CDATA[*/
//Tempel Disini Script nya.
/*]]>*/</script>
</body>
HTML terserah mau pasang di mana. mau di template atau postingan terserah.