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
jQuery
adalah pustakaJavaScript
lintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML. Dewasa ini,jQuery
merupakan pustakaJavaScript
yang 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
jQuery
itu gratisjQuery
itu simple, kita tidak perlu repot menuliskan kode yang sangat panjang, sebagaimana penggunaan javascript murni (menyesuaikan dengan keperluan kode dan efisiensi)jQuery
dapat 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 :PenggunaanjQuery
di browser yang sangat tua, sangat tergantung cara penulisan kode, penggunaanselector
, cara pemuatanjquery.js
, serta dalam beberapa kasusHTML TAG
yang baru padaHTML5
tidak 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