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

Jawaban:

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
11
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
34
dapatkah Anda membantu saya memahami mengapa pemesanan itu penting?
chovy
12
@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
3
Saya penasaran: Mengapa penting untuk melampirkan elemen ke DOM sebelum menyetel atribut onloaddan src?
Jake Wilson
1
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