Mencoba mengaktifkan peristiwa pemuatan di tag skrip

102

Saya mencoba memuat sekumpulan skrip secara berurutan, tetapi peristiwa onload tidak diaktifkan untuk saya.

    var scripts = [
        '//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js',
        '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js',
        MK.host+'/templates/templates.js'
    ];

    function loadScripts(scripts){
        var script = scripts.shift();
        var el = document.createElement('script');
        el.src = script;
        el.onload = function(script){
            console.log(script + ' loaded!');
            if (scripts.length) {
                loadScripts(scripts);
            }
            else {
                console.log('run app');
                MK.init();
            }
        };

        $body.append(el);
    }

    loadScripts(scripts);

Saya kira kejadian asli seperti el.onload tidak aktif ketika jQuery digunakan untuk menambahkan elemen ke DOM. Jika saya menggunakan native document.body.appendChild(el)maka itu akan menyala seperti yang diharapkan.

javascript jquery onload

— chovy
sumber

kunjungi: tautan ini: stackoverflow.com/questions/4845762/… Ini menggunakan fuull

— Jitesh

144

Anda harus mengatur srcatribut setelah itu onloadacara, f.ex:

el.onload = function() { //...
el.src = script;

Anda juga harus menambahkan skrip ke DOM sebelum melampirkan onloadacara:

$body.append(el);
el.onload = function() { //...
el.src = script;

Ingatlah bahwa Anda perlu memeriksa readystatedukungan IE. Jika Anda menggunakan jQuery, Anda juga bisa mencoba getScript()metode ini: http://api.jquery.com/jQuery.getScript/

— David Hellsing
sumber

itu sebenarnya tidak memperbaikinya. Tetapi jika saya hanya menggunakan document.body.appendChild(el)sebagai pengganti $ ('body']. Append (el); lalu peristiwa onload diaktifkan seperti yang diharapkan.

— chovy

dapatkah Anda membantu saya memahami mengapa pemesanan itu penting?

— chovy

@David Mengapa tidak menambahkan elemen terakhir, seperti yang direkomendasikan di tempat-tempat seperti html5rocks.com/en/tutorials/speed/script-loading ? Itu akan membuat urutan yang Anda tambahkan ke event listener dan menyetelnya menjadi srctidak relevan.

— Stuart P. Bentley

Saya penasaran: Mengapa penting untuk melampirkan elemen ke DOM sebelum menyetel atribut onloaddan src?

— Jake Wilson

Jika skrip di-cache, maka segera setelah Anda menambahkan src, item tersebut dimuat dan onload tidak diaktifkan. Menambahkan onload sebelum src akan memastikan bahwa onload diaktifkan untuk skrip yang di-cache.

— JonShipman