Kali ini kita akan membahas bagaimana membuat tampilan web kita jadi lebih dinamis. Berbagai macam kode pemrograman dan beserta usaha kita untuk memperindah tampilan web dengan berbagai tehnik grafis membuat web kita jadi lambat dalam proses load atau pembacaan script file oleh browser apalagi kalau akses internetnya lambat juga. Hal ini tentunya membuat para pengunjung situs malah jenuh menunggu dan lebih parahnya, sobat akan kehilangan pengunjung karena web sobat terlalu lama loading. Sangat disayangkan bukan? Niat kita memperindah web, eh malah mengecewakan pengunjung karena kebosanan nunggu. Biasanya web menampilkan tampilan loading sebagai tanda bahwa terjadi proses loading. Dan hasilnya sangat luar biasa, walaupun waktu yang digunakan sama saja yaitu ada dan tidak adanya tampilan proses loading ternyata para pembaca akan lebih senang menunggu dengan melihat sesuatu yang bergerak daripada tidak ada sama sekali (ibarat menunggu tanpa kepastian). Nah, biar para pembaca atau pengunjung situs sobat tidak bosan, sekiranya izinkan saya membagikan sedikit tips buat sobat programmer untuk memperkenalkan Jquery dalam fungsinya mengatur tampilan proses loading.
Untuk para programmer web pemula, sebaiknya sambil mempelajari postingan ini, sobat ketikweb coba membuka postingan tentang Fondasi Dasar CSS dan HTML dan Tag Body pada HTML. Berikut adalah contoh script proses loading yang sobat bisa masukkan ke dalam file html sobat yang sudah ada:
1. Masukkan file script jquery terbaru, sobat bisa download dan tentukan sendiri lokasinya atau langsung copy dan paste aja script dibawah ini diantara tag head pada html sobat.
<head>
<script type="text/javascript" src="https://sites.google.com/site/ketikweb/javafile/jq-cilbut.js"></script>
</head>
2. Masukkan pengenal id gambar proses loading di antara tag body. Terserah sobat naruhnya dimana, maksudnya tergantung sobat pengen taruh gambar proses loading ini dimana saja. Untuk file imagenya sobat bisa dowload dari mana saja dan tentukan lokasinya sendiri atau langsung copy dan paste aja script merah dibawah ini.
<body>
<div id="loading"><img src="https://sites.google.com/site/ketikweb/gambarfile/loading2.gif" /></div>
</body>
3. Masukkan proses pembacaan javascript. Sobat simpan diakhir kode html sobat. Boleh setelah tag body.
</body>
<script type="text/JavaScript">
//loading
$('#tampilan').hide();
$("#loading").fadeIn();
$('#tampilan').hide();
$("#loading").fadeIn();
//fungsi tampildata
function tampildata() {
$.ajax({
type:"POST",
url:"nama file yang akan di load.html",
success: function(html){
$("#loading").fadeOut();
$('#tampilan').html(html);
$('#tampilan').fadeIn(2000);
}
});
}
tampildata();
</script>function tampildata() {
$.ajax({
type:"POST",
url:"nama file yang akan di load.html",
success: function(html){
$("#loading").fadeOut();
$('#tampilan').html(html);
$('#tampilan').fadeIn(2000);
}
});
}
tampildata();
Setelah itu coba sobat jalankan. Selamat bagi sobat yang berhasil, bagi yang belum berhasil pastikan scriptnya benar dan lokasi penempatan scriptnya juga harus benar. Jika ada pertanyaan, silahkan tinggalkan comment sobat dibawah. Untuk belajar dan interaktif langsung dengan saya, sobat bisa masuk dan log up di heroscoop.com.Terimakasih dan Salam Ketikweb Untuk Anda...
as website css source a html about html belajar css belajar website belajar html belajar pembelajaran bahasa inggris belajar bahasa inggris belajar php belajar mendesain web css to html cara web cara membuat web cara belajar web cara belajar cepat cara belajar code code html contoh css cara mendesain web cara mendesain website designer web design web design web free edit html free web how to html. html code for, html code, html for program web pengertian web i web in html kode html membuat web .com membuat web membuat css membuat website gratis make a web mudah belajar metode belajar mendesain web mendesain website situs web syntax html tutorial web the web text to html tutorial css tutorial html tutorial php webmaster web belajar website belajar web site web page website web design web sites web indonesia web gratis web magazine web hosting.
|
Share ke Google
|
"Sobat suka postingan ini? Silahkan copy link dibawah ini dan paste ke web, blog, atau sosial media sobat yang nantinya akan menghubungkan sobat langsung dengan postingan ini. "
|
| Untuk mendapat respon balik dari saya, tuliskan identitas sobat dalam memberi komentar dalam kolom dibawah ini. |
2 comments:
This comment has been removed by the author.
bisa di jalankan di web lokal gak ya? seperti di localhost ?
Post a Comment