simple lazy Load Image

simple lazy Load Image

by Adi Jaya

HTML

<!-- jika dengan metode onclick pakai ini
<button onclick='lazyLoadImage();'>KLIK SAYA</button>
hapus js bagian window.onload = function(){...}
-->
<h2>Di tunggu sebentar bos...</h2>

<figure class='center'>
<!--penerapan buka-->
<img class='js-only' alt='demo' data-src='http://2.bp.blogspot.com/-ojA8vDdFtr4/VknTbe2wwDI/AAAAAAAABj8/qRUupuIaDuw/s640/Benih-sayuran-Balkon-bonsai-ungu-biji-terong-panjang-30-biji-pack-50-pcs-lot-RS57.jpg' src='data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
<noscript>
<img alt='demo' src='http://2.bp.blogspot.com/-ojA8vDdFtr4/VknTbe2wwDI/AAAAAAAABj8/qRUupuIaDuw/s640/Benih-sayuran-Balkon-bonsai-ungu-biji-terong-panjang-30-biji-pack-50-pcs-lot-RS57.jpg'/>
</noscript>  
 <!--penerapan tutup-->
 <figcaption>Keterangan - ini buah terong</figcaption>
</figure>

















jika penggunaan ditemplate blogger kurang lebih seperti ini, menyesuaikan jenis template.
<pre>
&lt;img class=&#039;js-only&#039; expr:alt=&#039;data:post.title&#039; expr:data-src=&#039;data:post.firstImageUrl&#039; expr:title=&#039;data:post.title&#039; src=&#039;data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=&#039;/&gt;

&lt;!-- backup, jika javascript gak aktif --&gt;
&lt;noscript&gt;
  &lt;img expr:alt=&#039;data:post.title&#039; expr:src=&#039;data:post.firstImageUrl&#039; expr:title=&#039;data:post.title&#039;/&gt;
&lt;/noscript&gt;

&lt;!-- tambah css untuk element yang pake js taroh di head --&gt;
&lt;noscript&gt;
&lt;style&gt;
  .js-only {display:none;}
&lt;/style&gt;
&lt;/noscript&gt;

&lt;!-- js nya taroh di atas body bagian akhir --&gt;
&lt;script type=&#039;text/javascript&#039;&gt;
//&lt;![CDATA[
function lazyLoadImage() {
    var a = document.getElementsByTagName(&quot;img&quot;);
    for (var i = 0; i &lt; a.length; i++) {
        if (a[i].getAttribute(&#039;data-src&#039;)) {
            a[i].setAttribute(&#039;src&#039;, a[i].getAttribute(&#039;data-src&#039;));
            a[i].removeAttribute(&#039;data-src&#039;);
       ...

CSS

body {
  padding :10px;
  font-family : "verdana", arial, san-serif;
  font-size :13px;
}
.center {text-align:center;}
pre {
    padding: 15px;
    overflow: auto;
    background: #353434;
    color: #b1b1b1;
    border-radius: 5px;
}

JavaScript

//facebook.com/nafis3333
function lazyLoadImage() {
    var a = document.getElementsByTagName("img"); //tag name img
    for (var i = 0; i < a.length; i++) { //hitung element di variabel a
        if (a[i].getAttribute('data-src')) { // ambil data attr
            a[i].setAttribute('src', a[i].getAttribute('data-src'));// set attr src dari data src
            a[i].removeAttribute('data-src'); // hapus attr data-src
        }
    }
}

//menjalankannya
window.onload = function(){
	setTimeout(lazyLoadImage, 5000); 
  //setting waktu, 4000,5000,6000 dst. bekerja setelah loading page selesai
  //5000 = 5 detik, lolos gtmetrix
  //dibawah 5 detik masih terbaca oleh gtmetrix
  // pastikan gak bentrok waktunya dengan yang lain misal
  setTimeout(abaikan, 6000); //detik keenam
}


//abaikan bagian ini
function abaikan(){
 alert('tes load fungsi js yang lain detik ke enam');
}