尝试在脚本标签上触发onload事件


100

我正在尝试按顺序加载一组脚本,但是onload事件对我没有触发。

    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);

我猜想当使用jQuery将元素添加到DOM时,不会触发诸如el.onload之类的本地事件。如果我使用本机,document.body.appendChild(el)则可以正常启动。


访问:thi链接:stackoverflow.com/questions/4845762/… 这是使用fuull
Jitesh

Answers:


143

您应该在事件f.ex 之后设置src属性:onload

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

您还应该附加onload事件之前将脚本附加到DOM :

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

请记住,您需要检查readystateIE支持。如果您使用的是jQuery,则还可以尝试以下getScript()方法:http : //api.jquery.com/jQuery.getScript/


11
实际上并不能解决问题。但是,如果我只是使用document.body.appendChild(el)$('body')。append(el)代替;然后onload事件会按预期触发。
chovy

34
您能帮我理解为什么订购很重要吗?
chovy

12
@David为什么不像在html5rocks.com/en/tutorials/speed/script-loading这样的地方推荐的那样最后添加元素?那应该使添加事件侦听器和将其设置为src无关的顺序。
Stuart P. Bentley

3
我很好奇:为什么在设置onloadsrc属性之前将元素附加到DOM为何很重要?
杰克·威尔逊

1
如果脚本被缓存,则一旦添加src,该项目即被加载,并且onload不会触发。在src之前添加onload将确保对缓存的脚本触发onload。
JonShipman,
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.