Async Load JavaScript Files with Callback

前端未结

关注

 6  1173

I am trying to write an ultra simple solution to load a bunch of JS files asynchronously. I have the following script below so far. However the callback is sometimes called

相关标签:

6条回答

深忆病人

2020-12-05 08:52

Just in case you find this useful, I've created an async utility library that would let you write the above code as:

var Loader = function () {}

Loader.prototype = {
    require: function (scripts, callback) {
        async.map(scripts, this.writeScript, callback);
    },
    writeScript: function(src, callback) {
        var s = document.createElement('script');
        s.type = "text/javascript";
        s.src = src;
        s.addEventListener('load', function (e) { callback(null, e); }, false);
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(s);
    }
}

If you're doing lots of asynchronous calls it has some quite powerful features :)

http://caolanmcmahon.com/async.html

0 讨论(0)

北恋

2020-12-05 08:52
Like Aaron says there's a bug in chrome,but there are also problems on IE and other browsers.

I tryed different ways to create my lazy loader and i had a lot of problems:
- adding a <script> tag : problems with script events(onload,onerror,etc.) in explorer and other browsers
- reading a script with ajax and parsing the text(with eval,it's javascript so don't worry it's not evIl) : VERY difficult to debug (it's parsed as a single line without comments so you can't know what line gives you an error)
- reading the script with ajax and adding a <script> tag with the text of the script: works very well on all browsers; you can create async and sync loading with the same function and you can also control very well errors,loading etc.(if you know the basics of ajax you should know how to handle variuous http state) and it's what i recommend.
0 讨论(0)
发布评论:

提交评论
- 加载中...

旧时难觅i

2020-12-05 08:54

I recommend you use a tiny loader javascript like JcorsLoader (only 647B with Gzip)

JcorsLoader.load(
                "http://xxxx/jquery.min.js",
                function() {
                    $("#demo").html("jQuery Loaded");
                },
                "http://xxxx/jquery.cookie.js",
                function() {  
                    $.cookie('not_existing'); 
                }
            );

Load multiples js in parallel and execute in order without blocking DOMReady or onload.

https://github.com/pablomoretti/jcors-loader

0 讨论(0)

小鲜肉

2020-12-05 09:00
What about jQuery....
```
$.getScript('abc.js'); 
```
Above code will load the "abc.js" script file asynchronously....
0 讨论(0)
发布评论:

提交评论
- 加载中...
-上瘾入骨i

2020-12-05 09:05

There is nothing wrong with your code from what I can tell, this is just a bug in Chrome (it does it with window.onload also.)

I'd add it to the function that is triggered in the "load" function. If the variable exists, execute the JS code, but if it doesn't, use a setTimeout to check again in 500ms or so.

0 讨论(0)
发布评论:

提交评论
- 加载中...

无人及你

2020-12-05 09:07

jcors-loader.js not working in Internet Explorer...

Index.html

<html>
    <head>
    <script type="text/javascript" src="/js/jcors-loader.js"></script>
    <script>
        JcorsLoader.load(
                "js/jquery-1.8.0.js",
                "/js/alertme.js",
                function() {
                    $("#result").text("TEST OK");
                }
        );

    </script>
    </head>
    <body>
    <h1 id="result"></h1>
    </body>
    </html>

alertme.js

alert("Loaded");

This works fine in chrome and firefox it displays "TEST OK" and popup...But no message or alert in IE(7,8,9)...Any help will be appreciated.

0 讨论(0)