Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
Javascript dewasa ini sangat digemari oleh para pembuat web, dimana mereka selalu beralasan bahwa script java mampu memberikan sebuah tampilan yang sangat baik dalam hal fitur. Hal ini cukup beralasan, mengingat tampilan dengan menggunakan sebuah kode HTML saja dirasa sangat kaku.

Ditambah lagi dengan perkembangan fitur JQuery atau pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini sendiri dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL.

Kode-kode yang dibangun sangat bersifat fleksible dan berkesan elegan pada tampilannya. Namun kode-kode tersebut banyak dikeluhkan oleh para webdesigner ataupun para blogger, karena bisa terlalu atau sangat panjang-hal ini tentu berdampak pada masa loading sebuah web atau blog yang didukung dengan server kecil.

Dari penjelasan diatas sudah barang tentu yang k'ian maksudkan adalah pola kode script java ini sendiri cukup memakan banyak waktu pada saat loading, untuk itulah ada 2 alternatif cara mengatasinya,

1. Dengan Pola Eksternal Link, pola ini dimaksudkan untuk memisahkan antara kode yang kita punya dengan sebuah layanan yang mampu mendukung sebuah link dari luar. salah satunya adalah dengan menggunakan Google sites (klik disini untuk cara pembuatan google sites). dari proses yang sudah kita lihat tadi, berikut cara penerapannya pada blog atau website kita (untuk lebih jelas klik disini).
Langkah pertama pilih sebuah kode Java yang ingin dikompress, lihat contoh :
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 5px 5px 0px; text-align:justify; "><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>

</script>
  • Sekarang cut / potong semua kode yang berwarna merah diatas, ingat hanya yang berwarna merah. Karena kode yang berwarna hitam adalah induk atau penanda dari kode tersebut (setiap kode java sama).
  • Setelah dicut/ potong, simpan didalam file "Notepad" pada komputer kamu, kemudian simpan dengan menggunakan nama yang sesuai dengan fungsi kode tersebut. misal kode yang kita gunakan adalah kode untuk "readmore" atau "Baca Selengkapnya" maka file yang kita simpan bisa kita buat dengan nama : Readmore.js atau bacaselengkapnya.js (Pada setiap file yang disimpan harus menggunakan penanda untuk kode itu sendiri, pada javascript akhiran yang digunakan adalah .js, kemudian pada kode CSS menggunakan .css).
  • Jika sudah klik situs google sites yang sudah kamu buat tadi, kalau belum(klik disini untuk cara pembuatan google sites). dari proses yang sudah kita lihat tadi, berikut cara penerapannya pada blog atau website kita (untuk lebih jelas klik disini). Jika sebuah kode link eksternalnya sudah terbuat, kita cukup memindahkan saja kedalam hostingan blog atau website kita.
2. Dengan cara Compress Javascript
Cara kedua mungkin lebih mudah dari yang pertama namun hasilnya tidak sebaik pada teori yang pertama. berikut cara penggunaannya :
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 5px 5px 0px; text-align:justify; "><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>

</script>
Sama seperti cara yang pertama yakni copy semua kode yang berwarna merah ( Ingat hanya yang berwarna merah ).
Kemudian klik pada link berikut : http://javascriptcompressor.com/, dan pastekan semua kode yang sudah kita copy tadi pada kolom pertama, lihat gambar:

Klik tombol "Compress" dan akan muncul kode hasil kompressan tadi pada kolom kedua, lihat gambar :
Copy kode hasil Compressan tadi, dan letakkan kembali pada kode awal yang kita ambil tadi diantara <script type='text/javascript'> dan </script>, sehingga hasilnya akan jadi seperti ini :
<script type='text/javascript'>function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 5px 5px 0px; text-align:justify; "><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}</script>
Sangat mudahkan, mudah-mudahan hal ini bisa membantu sobat dalam mengatasi loading blog yang berat.

Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

1 Response to "Loading lebih cepat dengan Javascript Compress"

  1. Duh gak ngarti,maklum gaptek,nice info..salam love,peace and gaul ...Replay

     

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |