Tips Mastamvan Lazy Load

source

• Masuk ke menu Template → Edit HTML, cari kode </body>

• Setelah ketemu, masukan script lazyload images dibawah ini tepat diatasnya

<script type="text/javascript">
//<![CDATA[
//LazyLoad Image
function loadScript(d){var o=document.createElement("script");o.src=d,document.body.appendChild(o)}function downloadJSAtOnload(){loadScript("https://rawgit.com/mastamvan/backup/master/lazyload.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

• Save Template...

Nah tahap selanjutnya kita tinggal menentukan gambar thumbnail mana yang ingin di defer mengunakan lazy load ini.

Kalian harus menambahkan class='lazy' pada tag imagenya dan Kalian Harus Merubah src menjadi data-src atau expr:src menjadi expr:data-src. Contoh

<img src=".../link-image-kalian.png">
<img expr:src="dataimagenya">

Rubah Menjadi

<img class="lazy" data-src=".../link-image-kalian.png">
<img class="lazy" expr:data-src="dataimagenya">

Atau Kalian Juga Bisa Merubahnya Jadi

<img class="lazy" src='.../link-image-resolusi-kecil.png' data-src=".../link-image-kalian.png">

Okeh, sebagai contoh saya akan memberikan tutorial buat kalian yang menggunakan readmore tanpa javascript seperti pada template Evo Magz karena mungkin banyak di antar kalian yang menggunakannya

• Langkah pertama, silahkan cari kode data:post.thumbnailUrl Kira-kira penampakannya seperti berikut

<b:if cond='data:post.thumbnailUrl'>
    <a expr:href='data:post.url'>
        <div class='img-thumbnail'><img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 200, &quot;400:300&quot;)' expr:title='data:post.title' /></div>
    </a>
    <b:else/>
    <b:if cond='data:post.firstImageUrl'>
        <a expr:href='data:post.url'>
            <div class='img-thumbnail'><span class='rollover' /><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' /></div>
        </a>
        <b:else/>
        <a expr:href='data:post.url'>
            <div class='img-thumbnail'><span class='rollover' /><img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6IATDEt2-jgU5pPbx5zcfiEtmeo8x-Grgr9HjUQmuDAAHcvOGFVgaDHw66p2Xf_joniqk1JlVtpb7w_kkEQHk5OC02QtjvJ4Bo_GAEvO04pg15V0fOX3aBrKQodMfZptb1xiE8QYAmuei/w200-c-h150/no-image.png' /></div>
        </a>
    </b:if>
</b:if>

• Kalian Rubah menjadi

<b:if cond='data:post.thumbnailUrl'>
    <a expr:href='data:post.url'>
        <div class='img-thumbnail'><img class="lazy" expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 200, &quot;400:300&quot;)' expr:title='data:post.title' /></div>
    </a>
    <b:else/>
    <b:if cond='data:post.firstImageUrl'>
        <a expr:href='data:post.url'>
            <div class='img-thumbnail'><span class='rollover' /><img class="lazy" expr:alt='data:post.title' expr:data-src='data:post.firstImageUrl' expr:title='data:post.title' /></div>
        </a>
        <b:else/>
        <a expr:href='data:post.url'>
            <div class='img-thumbnail'><span class='rollover' /><img class="lazy" expr:alt='data:post.title' expr:title='data:post.title' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6IATDEt2-jgU5pPbx5zcfiEtmeo8x-Grgr9HjUQmuDAAHcvOGFVgaDHw66p2Xf_joniqk1JlVtpb7w_kkEQHk5OC02QtjvJ4Bo_GAEvO04pg15V0fOX3aBrKQodMfZptb1xiE8QYAmuei/w200-c-h150/no-image.png' /></div>
        </a>
    </b:if>
</b:if>

Kalo kalian menggunakan reamore dengan javascript, tinggal rubah srcnya menjadi data-src
Intinya, kalian cari tag <img lalu rubah bagian.
src menjadi data-src atau expr:src menjadi expr:data-src
dan tambahkan class lazy