1. Halo Guest, pastikan Anda selalu menaati peraturan forum sebelum mengirimkan post atau thread baru.

[SHARE] Lazyload Image untuk mengurangi beban Load Image yang Besar atau Banyak

Discussion in 'Pemrograman Web' started by prieku, Oct 24, 2013.

Tags:
  1. prieku

    prieku Newbie

    Joined:
    Nov 4, 2006
    Messages:
    14
    Likes Received:
    1
    Sekilas : Lazyload Image berguna untuk mengurangi beban tampilan website yg disebabkan karena proses Load Image yang mempunyai ukuran besar atau menampilkan banyak sekali image yg cenderung membuat website menjadi lambat.

    Share ini sudah ada di trit lain hanya saja disitu diterangkan cuma untuk blog, nah kali ini khusus untuk web statis html dan dynamic php. Referensinya dari lintasme yg pake animasi spin pake kode dibawah ini.....Hasilnya setelah di terapin di webiste html atau php akan seperti lintasme

    =====Langkah Pertama copas kode berikut di atas </head>======
    HTML:
    <script pagespeed_no_defer="">(function(){var d=null,e=window,f=document,g="documentElement",h="scrollTop",l="prototype",m="body",n="getAttribute",p="",q="1",r="data",s="img",t="load",u="number",v="on",w="onload",x="pagespeed_lazy_position",y="pagespeed_lazy_replaced_functions",z="pagespeed_lazy_src",A="position",B="relative",C="scroll",D="src";e.pagespeed=e.pagespeed||{};var E=e.pagespeed,F=function(a){this.a=[];this.i=0;this.b=!1;this.o=a;this.c=d;this.g=0;this.h=200;this.f=!1};
F[l].s=function(){var a=0;typeof e.pageYOffset==u?a=e.pageYOffset:f[m]&&f[m][h]?a=f[m][h]:f[g]&&f[g][h]&&(a=f[g][h]);var b=e.innerHeight||f[g].clientHeight||f[m].clientHeight;return{top:a,bottom:a+b,height:b}};F[l].n=function(a){var b=a[n](x);if(b)return parseInt(b,0);var b=a.offsetTop,c=a.offsetParent;c&&(b+=this.n(c));b=Math.max(b,0);a.setAttribute(x,b);return b};F[l].r=function(a){var b=this.n(a);return{top:b,bottom:b+a.offsetHeight}};
F[l].q=function(a,b){if(a.currentStyle)return a.currentStyle[b];if(f.defaultView&&f.defaultView.getComputedStyle){var c=f.defaultView.getComputedStyle(a,d);if(c)return c.getPropertyValue(b)}return a.style&&a.style[b]?a.style[b]:p};F[l].p=function(a){if(this.q(a,A)==B)return!0;if(!this.f&&(0==a.offsetHeight||0==a.offsetWidth))return!1;var b=this.s(),c=a.getBoundingClientRect();c?(a=c.top-b.height,b=c.bottom):(c=this.r(a),a=c.top-b.bottom,b=c.bottom-b.top);return a<=this.i&&0<=b+this.i};
F[l].m=function(a){this.l(a);var b=this;e.setTimeout(function(){var c=a[n](z);if(c!=d)if((b.b||b.p(a))&&a.src.indexOf(-1!=b.o)){var k=a.parentNode,G=a.nextSibling;k&&k.removeChild(a);a.getAttribute=a.j;a.removeAttribute(w);a.removeAttribute(z);a.removeAttribute(y);k&&k.insertBefore(a,G);a.src=c}else b.a.push(a)},0)};F[l].loadIfVisible=F[l].m;F[l].u=function(){this.b=!0;this.d()};F[l].loadAllImages=F[l].u;F[l].d=function(){var a=this.a,b=a.length;this.a=[];for(var c=0;c<b;++c)this.m(a[c])};
F[l].e=function(a,b){return a.a?a.a(b)!=d:a[n](b)!=d};F[l].v=function(){for(var a=f.getElementsByTagName(s),b=0;b<a.length;++b){var c=a[b];this.e(c,z)&&this.l(c)}};F[l].overrideAttributeFunctions=F[l].v;F[l].l=function(a){var b=this;this.e(a,y)||(a.j=a[n],a.getAttribute=function(a){a.toLowerCase()==D&&b.e(this,z)&&(a=z);return this.j(a)},a.setAttribute(y,q))};
E.k=function(a,b,c){if(a.addEventListener)a.addEventListener(b,c,!1);else if(a.attachEvent)a.attachEvent(v+b,c);else{var k=a[v+b];a[v+b]=function(){c.call(this);k&&k.call(this)}}};E.t=function(a,b){var c=new F(b);E.lazyLoadImages=c;0!=b.indexOf(r)&&((new Image).src=b);E.k(e,t,function(){c.f=!0;e.setTimeout(function(){c.b=a;c.d()},200)});a||E.k(e,C,function(){if(!c.c){var a=c.h;(new Date).getTime()-c.g>c.h&&(a=0);c.c=e.setTimeout(function(){c.g=(new Date).getTime();c.d();c.c=d},a)}})};
E.lazyLoadInit=E.t;})();

pagespeed.lazyLoadInit(false, "http://s.xtremenitro.org/loading.gif");
</script>
    =====Langkah ke 2=====

    Kemudian cari kode <img src="namagambar.jpg"> di dalam halaman web kamu, biasanya terletak setelah <body>, ganti kode src= dengan pagespeed_lazy_src=, dan tambahkan setelah source tersebut kode berikut
    HTML:
    src="http://s.xtremenitro.org/loading.gif" onload="pagespeed.lazyLoadImages.loadIfVisible(this);"
    Jadi kurang lebih nanti seperti ini hasilnya
    HTML:
    <img pagespeed_lazy_src="namagambar.jpg" width="52" height="52" src="http://s.xtremenitro.org/loading.gif" onload="pagespeed.lazyLoadImages.loadIfVisible(this);">
    =====PENJELASAN======
    pagespeed_lazy_src=... untuk menampilkan gambar sebenarnya sedangkan src="http://s.xtremenitro.org/loading.gif" adalah gambar yg pertama kali di load

    Maaf kalo salah menerangkan,....semoga berhasil
     
    Last edited: Oct 27, 2013
    prieku, Oct 24, 2013
    #1
    xtmxady likes this.
  2. Askiam

    Askiam ★| S.E.O Indonesia |★

    Joined:
    Mar 7, 2013
    Messages:
    805
    Likes Received:
    52
    Location:
    Indonesia
    Iijin mempelajari dulu gan :ok:
     
    Askiam, Oct 24, 2013
    #2
  3. newbisa

    newbisa I'm Blogger Lovers

    Joined:
    Dec 13, 2010
    Messages:
    2,417
    Likes Received:
    539
    Location:
    DigitalJV.com
    Apakah fungsinya untuk meringankan web yg banyak gambarnya?
     
    newbisa, Oct 24, 2013
    #3
  4. prieku

    prieku Newbie

    Joined:
    Nov 4, 2006
    Messages:
    14
    Likes Received:
    1

    Salah satunya iya....tapi tidak mutlak, tergantung traffic dan koneksi ke server anda ya, klo pas kebetulan overload ya sama aja lambat
    kalo di tambah compress css, js, gzip gimana jadinya ya?
     
    prieku, Oct 24, 2013
    #4
  5. go.dre.am

    go.dre.am Ads.id Pro

    Joined:
    Jun 4, 2011
    Messages:
    376
    Likes Received:
    61
    Location:
    www.tetuku.com
    tapi timbul masalah lain gan. image tidak tertangkap search engine. soalnya yang di crawl kan bagian src
     
    go.dre.am, Oct 24, 2013
    #5
  6. prieku

    prieku Newbie

    Joined:
    Nov 4, 2006
    Messages:
    14
    Likes Received:
    1
    huhuhu :(
     
    prieku, Oct 25, 2013
    #6
  7. membaca

    membaca sedang membaca

    Joined:
    Aug 21, 2012
    Messages:
    1,635
    Likes Received:
    264
    ini berguna nih kalo untuk blogspot bisa ga?
    tapi livelinknya dimatikan dulu dong
     
    membaca, Oct 25, 2013
    #7
  8. punxs

    punxs musuhnya google

    Joined:
    Dec 9, 2010
    Messages:
    448
    Likes Received:
    48
    Location:
    Di Depan Mu
    @TS
    Linkout di nonaktifkan dulu sebelum ada yang lapor :)

    untuk lazyload kan tinggal pakai aja plugin jquerynya


    dibikin file noscriptnya sob
    Code:
    [COLOR=#800080]<img class="lazy" style="display:none;" [/COLOR]src="urlimage-loading.gif" data-original="urlimage-asli.jpg"[COLOR=#800080] />[/COLOR]
<noscript>[COLOR=#800080]<img [/COLOR]src="urlimage-asli.jpg"[COLOR=#800080] />[/COLOR]</noscript>
    untuk lengkapnya silahkan baca2 aja
    Code:
    http://www.appelsiini.net/projects/lazyload
     
    punxs, Oct 26, 2013
    #8
  9. wentalau

    wentalau Newbie

    Joined:
    May 11, 2012
    Messages:
    25
    Likes Received:
    1
    nice share gan....
    ane coba di website ane dulu
     
    wentalau, Oct 27, 2013
    #9

Share This Page