Cara defer loading multi css
Definisi dan Penggunaan
Atribut defer adalah atribut boolean.Saat ini, ia menentukan bahwa skrip dijalankan saat halaman selesai diurai.
Catatan: Atribut defer hanya untuk skrip eksternal (seharusnya hanya digunakan jika atribut src ada).
Catatan: Ada beberapa cara skrip eksternal dapat dijalankan:
- Jika async hadir: Script dijalankan secara asynchronous dengan sisa halaman (script akan dieksekusi saat halaman melanjutkan penguraian)
- Jika async tidak hadir dan menunda hadir: Script dijalankan saat halaman selesai diurai
- Jika tidak ada async atau defer yang ada: Script diambil dan dijalankan segera, sebelum browser melanjutkan penguraian halaman
Nah berikut kode untuk defer loading multiple css :
<script type="text/javascript">
var loadCSSFiles = function() {
var links = ["//example.com/css/custom.css", "//fonts.googleapis.com/css?family=PT+Sans", "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"],
headElement = document.getElementsByTagName("head")[0],
linkElement, i;
for (i = 0; i < links.length; i++) {
linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
linkElement.href = links[i];
headElement.appendChild(linkElement);
}
};
var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) {
raf(loadCSSFiles);
} else {
window.addEventListener("load", loadCSSFiles);
}
</script>
Taruh kode diatas di antara <head>DISINI</head> atau diatas </body> tag.
Comments
Post a Comment
Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.
If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.