Javascript Asinkron dilengkapi dengan fungsi Callback

Fungsi ini berguna untuk memuat file javascript / css secara asinkron, asinkron sendiri ialah, sebuah fungsi untuk memuat file setelah seluruh halaman berhasil termuat.

Dengan menggunakan fungsi ini, loading blog akan menjadi lebih baik dari pada memuat file secara langsung, karena file tersebut dimuat secara tidak langsung menggunakan javascript

function async(type, url, id, callback) {
    var a;
    if (type == "js") {
        a = document.createElement("script");
        a.id = id;
        a.src = url
    } else {
        if (type == "css") {
            a = document.createElement("link");
            a.rel = "stylesheet";
            a.href = url
        }
    }
    a.onload = function () {
        if (typeof callback == "function") {
            callback()
        }
        callback = null
    };
    a.onreadystatechange = function () {
        if (s.readyState == 4 || s.readyState == "complete") {
            if (typeof callback == "function") {
                callback()
            }
            callback = null
        }
    };
    document.getElementsByTagName("head")[0].appendChild(a)
}

Contoh Penggunaan untuk Javascript

Sebagai contoh, saya akan memuat skrip Json Comments secara tidak langsung. Namun pada saat yang bersamaan saya juga ingin memastikan agar eksekusi plugin terjadi hanya jika skrip tersebut telah berhasil dimuat:

async("js", "http://obesitystrike.blogspot.com/feeds/comments/default?alt=json-in-script&orderby=published&max-results=20&callback=rc", "rc", function () {
    alert('Berhasil Dimuat!')
})

Contoh Penggunaan untuk CSS

Sebagai contoh, saya akan memuat CSS Fonts Roboto dari Google Fonts secara tidak langsung.

async("css", "http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700|Ropa+Sans|Oswald")

Lihat Demo

Share this post