Script Defer Multiple JS

Ditulis oleh: Adhy Suryadi

Ditulis pada: 2/14/2021

Script Defer Multiple JS - Mungkin saja dalam sebuah halaman web atau blog terdapat beberapa JS dan Anda berniat untuk men-defer JS-JS tersebut. Agar tidak mengulang-ulang penulisan script defer, maka Anda bisa menggunakan script defer untuk multiple JS.

Defer itu sendiri secara sederhana adalah proses pemuatan JS dilakukan di latar belakang browser ketika halaman diakses dan dieksekusi setelah seluruh halaman berhasil dimuat. Dengan begitu, pemuatan JS tidak mengganggu pemuatan halaman. Sehingga saat ini defer sangat membantu dalam membuat loading halaman menjadi lebih ringan.

Saya sering membagikan script defer untuk single JS seperti berikut:

function downloadJSAtOnload(){var d=document.createElement("script");d.src="script.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

Nah, jika Anda berniat untuk mendefer beberapa JS, Anda bisa menggunakan kode script defer multiple JS berikut:

function loadDeferScript(o) {

  var d = document.createElement("script");

  d.src = o, document.body.appendChild(d)

}



function downloadJSAtOnload() {

  loadDeferScript("script1.js"), loadDeferScript("script2.js")

}

window.addEventListener ? window.addEventListener("load", downloadJSAtOnload, !1) : window.attachEvent ? window.attachEvent("onload", downloadJSAtOnload) : window.onload = downloadJSAtOnload;

Silahkan tambahkan ,loadDeferScript("script3.js") dan seterusnya jika ada, di belakang kode yang sudah ada seperti berikut:

function loadDeferScript(o) {

  var d = document.createElement("script");

  d.src = o, document.body.appendChild(d)

}



function downloadJSAtOnload() {

  loadDeferScript("script1.js"), loadDeferScript("script2.js"), loadDeferScript("script3.js")

}

window.addEventListener ? window.addEventListener("load", downloadJSAtOnload, !1) : window.attachEvent ? window.attachEvent("onload", downloadJSAtOnload) : window.onload = downloadJSAtOnload;

Atau jika di-minify akan seperti berikut:

function loadDeferScript(o){var d=document.createElement("script");d.src=o,document.body.appendChild(d)}function downloadJSAtOnload(){loadDeferScript("script1.js"),loadDeferScript("script2.js"),loadDeferScript("script3.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

Sebagai contoh, di bawah ini gabungan Google Analytics dan kode pelacakan Sosiago.

<script>

//<![CDATA[

function loadDeferScript(o){var d=document.createElement("script");d.src=o,document.body.appendChild(d)}function downloadJSAtOnload(){loadDeferScript("https://www.google-analytics.com/analytics.js"),loadDeferScript("https://api.sosiago.id/js/tracking.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;



window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;

ga('create', 'UA-XXXXX-Y', 'auto');

ga('send', 'pageview');



var id = "a61a6bc03af22d5e35dd59f667da3axxxxxxxxxxx";

//]]>

</script>

Demikian, semoga bermanfaat.