Bagaimana Cara Optimasi Image Di Web Menggunakan jQuery ? - Ada beberapa faktor yang membuat performa load web kita menjadi lama, di luar css dan js, anda satu hal yang membuat load web menjadi lama, yaitu media khususnya gambar, karena web sekarang pasti tidak akan bisa jauh dengan penggunakan gambar. Terkadang kalau kita tidak membatasi batas maksimum gambar yang harus di unggah pada sebuah web itu akan menjadi masalah. Selain menimbulkan space disk yang akan cepat habis, load web pun akan menjadi lambat. Mungkin untuk urusan space tidak terlalu di masalahkan, karena di jaman sekarang untuk membeli space disk sangat lah murah di bandingkan dulu. Yang jadi masalah utama sekarang adalah di load web akan menjadi berat.

Kemarin-kemarin saya baru dapet ilmu baru dari teman saya untuk masalah ini. Lalu teman saya menyarankan untuk memakai sebuah plugin jQuery bernama lazy.

Lazy adalah plugin pemuat konten untuk jQuery. Dia cepat, kaya fitur, extensible dan ringan. Ini dirancang untuk mempercepat pemuatan (loading) halaman dan mengurangi trafik lalulintas ke pengguna dengan cara memuat konten yang sedang tampil didepan mata saja.

Fitur :

• Retina support
• Fully open source
• Scroll in all directions
• Different callbacks
• Implement custom loaders
• Image placeholders
• Use effects
• Throttled
• Public functions
• Delayed loading
• Many instances
• Use inside containers
• Event support
• Mighty configuration

Pertama-tama, anda download lazy jQuery terlebih dahulu (disini). Jika lazy sudah selesai di unduh, anda dapat menginstal lazy dengan cara yang berbeda. Pilih cara yang Anda di bawah ini.

Host sendiri

<script type="text/javascript" src="jquery.lazy.min.js"></script>

CDN

<!-- cdnjs -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/0.6.4/jquery.lazy.min.js"></script>

<!-- jsDeliver -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/0.6.4/jquery.lazy.min.js"></script>

Package Managers

$ npm install jquery-lazy
$ bower install jquery-lazy

Untuk mengimplementasikan lazy sangatlah mudah, anda cukup menambahkan nama class pada tag image html anda.

HTML

<!-- load images the lazy way -->
<img class="lazy" data-src="path/to/image.jpg" />

<!-- load background images of other element types -->
<div class="lazy" data-src="path/to/image.jpg"></div>

JAVASCRIPT

$(function() {
    $('.lazy').lazy();
});

Vielen Dank :)
Tschüss, Bis Bald :)

More Info :: http://jquery.eisbehr.de/lazy/
Referensi : http://www.kang-cahya.com/2015/12/Optimasi-Load-Image-Pada-Web-Anda-Dengan-Lazy-jQuery.html

Continue Reading...

Cara membuat animasi auto typing dengan typed JS - Pada pembahasan kali ini saya akan membahas seputar typed JS. Dengan menggunakan typed JS memungkinkan anda membuat sebuah animasi auto typing dengan mudah hanya menggunakan beberapa baris kode saja :D (go to official site)

Persiapan
Download terlebih dahulu typed.js disini . Jangan lupa download juga jqurey-nya disini .

Sample Code

<script src="jquery.min.js"></script>
<script src="typed.js"></script>
<script>
  $(function(){
      $(".text").typed({
        strings: ["Hello.", "I'M Cahya."],
        typeSpeed: 100
      });
  });
</script>

<div class="text"></div>

Tambahkan ini untuk membuat animasi blink pada kursor

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

Pada pembasahasan typed JS ini saya punya beberapa sample demo dan menyiapkan souce code lengkap untuk anda lihat sekaligus mengunduhnya.

• Referensi
• Demo
• Download

Continue Reading...

Siapkan HTML kosong bwat halaman utama, pada header panggil dlu library jQuery nya:

<script language="”javascript”" src="”jquery-1.2.6.min.js”"> 

untuk interaktif user nya, gunakan Ajax jQuery Animation, atau dalam code nya dinamakan sebagai AJAX DISPLAY

<script
language=”javascript”>

//show animation

$(function(){

$(“#ajax_display”).ajaxStart(function(){

$(this).html(<div
style=”position:absolute;”><imgsrc=”ajax-loader-refresh.gif”/>
<br><strong>Loading….</strong><br><br>Pleasebe
patien, do not close the window. <br>Gathering data beingprogress
…</div>);

});

$(“#ajax_display”).ajaxSuccess(function(){

$(this).html();

});

$(“#ajax_display”).ajaxError(function(url){

alert(jqSajax is error );

});

});

</script>

Sedangkan untuk simulasi load external file nya, Saya pake script random pada library jQuery

<script type="”text/javascript”">
function getRandom() {
$(“#random”).hide(“slow”);
$(“#random”).load(“sleep.php”, , callback);
}
function callback() {
$(“#random”).show(“slow”);
setTimeout(“getRandom();”, 10000);
}
$(document).ready(getRandom);
</script>
<div id="”random”"></div>

“sleep.php”adalah file external yang diload oleh javascript random, dengan timeout10000 (10 detik). Timeout berarti, setelah 10 detik halaman akan diload ulang dari awal kembali (setelah 10 detik). sleep.php berisi script yg akan di load, lu bisa isi apa aja seperti contoh code dibawah ini untuk simulasi gw kasiin sleep(10)

<?
sleep(10);
echo “<span style=font-weight:bold;font-color:green;> All Data loaded successfully !!</span>”;
?>

Jadi untuk lengkapnya, berikut code HTML na:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>jQuery Ajax Display</title>
<script language=”javascript” src=”jquery-1.2.6.min.js”></script>
<script language=”javascript”>
//show animation
$(function(){
$(“#ajax_display”).ajaxStart(function(){
$(this).html(<div style=”position:absolute;”><imgsrc=”ajax-loader-refresh.gif”/> <br><strong>Loading….</strong><br><br>Pleasebe patien,  do not close the window. <br>Gathering data beingprogress …</div>);
});
$(“#ajax_display”).ajaxSuccess(function(){
$(this).html();
});
$(“#ajax_display”).ajaxError(function(url){
alert(jqSajax is error );
});
});
</script>

<style type=”text/css”>
<!–
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
body {
background-color: #FFFFFF;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
a:link {
color: #0066FF;
}
a:visited {
color: #0066FF;
}
a:hover {
color: #009900;
}
a:active {
color: #0066FF;
}
–>
</style></head>
<body>
<div id=”ajax_display”></div>
<div style=”position:absolute; top:100px;”>
<script type=”text/javascript”>
function getRandom() {
$(“#random”).hide(“slow”);
$(“#random”).load(“sleep.php”, , callback);
}
function callback() {
$(“#random”).show(“slow”);
setTimeout(“getRandom();”, 10000);
}
$(document).ready(getRandom);
</script>
<div id=”random”></div>
This is an Implementation for jQuery Ajax Display,  while loading a progress from an external source.<br />
developped by <a href=”http://dremi.info” target=”_blank”>dr.emi</a></div>
</body>
</html>

Sekian dari Saya, Mohon Ma'af apabila banyak kesalahan.. Wassalamualaikum wr. wb.

Continue Reading...