Cara Memuat jQuery.js dengan metode Async dan Defer
Tutorial kali ini adalah tentang bagaimana cara menulis jquery kode secara inline, tapi librari jquery nya dimuat secara Asynchronous dan Deferred (Asinkron dan Ditangguhkan).
Table of contents
Apa itu jQuery
jQueryadalah pustakaJavaScriptlintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML. Dewasa ini,jQuerymerupakan pustakaJavaScriptyang paling populer, dengan 65% pemasangan dari 10 juta situs Web dengan pengunjung tertinggi. jQuery adalah gratis, dan bersifat kode sumber terbuka dibawah lisensi MIT.
Kenapa menggunakan jQuery
jQueryitu gratisjQueryitu simple, kita tidak perlu repot menuliskan kode yang sangat panjang, sebagaimana penggunaan javascript murni (menyesuaikan dengan keperluan kode dan efisiensi)jQuerydapat dipelajari dengan cepat. Ribuan blog banyak yang mengulas tentang tutorial jQuery- Kompatibel lintas browser. Kita tak perlu khawatir menggunakan jquery dalam kesesuaiannya dengan jenis browser bahkan dibrowser yang sangat tua seperti
IE6. Disitus resmi jQuery ditulis :If you need to support older browsers like Internet Explorer 6-8, Opera 12.1x or Safari 5.1+, use jQuery 1.12.
Catatan :PenggunaanjQuerydi browser yang sangat tua, sangat tergantung cara penulisan kode, penggunaanselector, cara pemuatanjquery.js, serta dalam beberapa kasusHTML TAGyang baru padaHTML5tidak didukung, seperti<main>,<section>dan lain lain. - ...
Cara Penulisan Library jQuery dengan Async dan Defer
Cara menuliskan Library jQuery
Pertama Tulis Library jQuery didalam rentang element<head>...</head><html>
<head>
<title>...</title>
<script async='async' defer='defer' src='/jquery.js'></script>
</head>
<body>
</body>
</html>
Cara penulisan kode jQuery pada secara inline pada Halaman HTML
Untuk menuliskan kode jQuery pada halaman HTML, dapat ditulis seperti contoh berikut:
window.onload = function() {
if (window.jQuery) {
//Your jQuery code
}
}
Contoh Lengkap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>...</title>
<script async defer src='/jquery.min.js'></script>
</head>
<body>
<button>toggle #demo</button>
<p id='demo'>Hello world</p>
<script>
window.onload = function() {
if (window.jQuery) {
jQuery(document).ready(function($) {
$( "button" ).click(function () {
$( "#demo" ).toggle();
$( this ).toggleClass( "active" )
});
});
}
}
</script>
</body>
</html>
DEMOSemoga bermanfaat.
btw test koment link yah Google