Multi script eksternal loader

Di artikel ini saya akan berbagi untuk menjelaskan secara ringkas bagaiman kita membuat atau menyisipkan beberapa link script external hanya dalam satu tag script.
Pada umum nya script eksternal di gunakan untuk memasang Framework atau plugin pihak ketiga , apalagi jika lebih dari 5 script akan tampak berderet dan itu membuat kemungkinan blog lambat menjadi besar.

ya memang tidak beda nya sih , namun apabila kita menaruh nya dalam satu file akan berbeda juga di saat browser akan memuat halaman website.
saya beri contoh :

//Script pertama 
<script src=""/>
//Script ke dua
<script src=""/>
//Script ke tiga
<script src=""/>
//Script ke empat
<script src=""/>
//Script ke lima
<script src=""/>
//Script ke enam
<script src=""/>
//Script ke tujuh
<script src=""/>

pada daftar script di atas memiliki 7 buah script jadi kita bagi saja misalkan 7 buah script diatas di bagi dengan kecepatan internet pengunjung dan dalam satu kali loading browser membaca script satu persatu dengan menunggu respon dari link tujuan tergantung dari link tujuan tersebut cepat atau tidak ? apabila browser menyatakan 404 browser akan mencoba mengulang dalam 5 detik.
ingat pada tiap script eksternal membutuhkan 5 detik untuk browser bisa memuat secara penuh , jadi tinggal di kalikan saja hasil dibagi tadi

7 x 5 = 35 = 35ms bagi pengunjung untuk mencoba datang ke website anda.
apabila lebih dari angka di atas bisa saja mencapai 100ms untuk menguras data internet pengunjung menurut saya sih cukup besar.

mengenai masalah itu saya membuat salah satu script dimana waktu itu saya sangat terinspirasi dari script dengan kode variable loadCSS() dimana saya menggunakan metode serupa.

maaf ya saya gak tau siapa author dari script loadCSS() tersebut jadi saya tidak dapat memberikan referensi nya dengan pasti.

Untuk cara pasang ?

Nah untuk cara pasang cukup mudah kita pastikan template dengan keadaan baik tanpa ada error jquery.
Cari tag <head/> atau head/ letakan kode di bawah tepat di atas nya apabila ada script lain taruh paling atas.

<script type='text/javascript'>
//<![CDATA[
//dynamic loader
function loadJS(e, t, n) { "use strict";var pa = document.createDocumentFragment(),pa = window.document.createElement("script"); var o = t || window.document.getElementsByTagName("body")[0];pa.type = "text/javascript"; pa.async = true; pa.src = e;o.appendChild(pa);}
loadJS("LINK-SCRIPT-EKSTERNAL");
//]]>
</script>

tambahkan script anda pada bagian ini loadJS("LINK-SCRIPT-EKSTERNAL"); ganti LINK-SCRIPT-EKSTERNAL menjadi link eksternal sobat.
jika sobat ingin menambahkan script baru tinggal buat baris baru lalu buat kode seperti ini lagi loadJS("LINK-SCRIPT-EKSTERNAL"); mudah kan ?.
PERHATIKAN pula penempatan pada template jika ingin menambahkan beberapa script baru pada template blog sobat, usahakan sobat menaruh script seperti jquery atau plugin dan semacam nya di tempat teratas kecuali jquery pisahkan saja jangan taruh pada script loader taruh di atas script loader.

Contoh penempatan !
jika sobat memasang script framework atau yang lain dengan menggunakan script loader lihat di bawah ini.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
function loadJS(e, t, n) { "use strict";var pa = document.createDocumentFragment(),pa = window.document.createElement("script"); var o = t || window.document.getElementsByTagName("body")[0];pa.type = "text/javascript"; pa.async = true; pa.src = e;o.appendChild(pa);}
loadJS("https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js");
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
$('div').dropdown();
//]]>
</script>

anda tidak perlu menaruh jquery pada script loader hanya taruh di atas nya saja seperti itu
dan kode di atas tidak menggunakan $(document).ready(function(){}) atau $(function(){..}) karena script eksternal atau script yang bersangkutan berada di atas dari kode tersebut termasuk jquery.

apbila terindikasi anda menggunakan jquery dengan menggunakan kode variable berada di atas dari kode jquery maka anda harus menambahkan jquery .ready().

seperti ini jadi nya.

<script type='text/javascript'>
//<![CDATA[
$(function(){
$('div').dropdown();
});
//]]>
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
function loadJS(e, t, n) { "use strict";var pa = document.createDocumentFragment(),pa = window.document.createElement("script"); var o = t || window.document.getElementsByTagName("body")[0];pa.type = "text/javascript"; pa.async = true; pa.src = e;o.appendChild(pa);}
loadJS("https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js");
//]]>
</script>

Namun metode ini saya rasa tidak terlalu efectif apabila di website memiliki banyak sekali script yang bebagi Global variable dan hasil return value dari beberapa function. jika sudah di bungkus jquery .ready() sudah menjadi local variable !

yah mungkin itu saja yang dapat saya bagikan hari ini semoga bermanfaat untuk sobat.

Untuk mengetahui perkembangan bagaimana jadi nya template safelink Versi 4.2 silahkan kunjungi Dereloading

Go to Link