异步脚本不可访问

Question

I am loading a script that I created asynchronously to help prevent slowing down the site. I'm unable to call the class Class.track({"some_param":"some_data"}) due to it not being available yet. How can I achieve asynchronous loading and having the ability to call the class?

The code for loading in the js is below, it's occurring before the closing body tag and the Class.track is getting called below it.

<script type="text/javascript">

    (function() {
        function async_load(){
            var api_id = "XXXXXXXXX";
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.src = 'https://site.com/script.js?id=' + api_id;
            var x = document.getElementsByTagName('script')[0];
            x.parentNode.insertBefore(s, x);
         }
    if (window.attachEvent)
        window.attachEvent('onload', async_load);
    else
        window.addEventListener('load', async_load, false);
    })();

    Class.track("page_view", {"page":"plans"});
</script>

Edit

Took the comment from Dan and the answer from TJ and decided to modify it, below is what I came up with, hoping this will help someone else.

<script type="text/javascript">
    var _Class = new function(){
        var items = [];

        this.track = function(type, params){
            params = params || {};
            items.push({"type":type, "params":params});
        }

        this.get = function(){
            return items;
        }

    };

    var Class = _Class;

    (function() {
        function async_load(){
            var api_id = "XXXXXXXXX";
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.src = 'https://site.com/script.js?id=' + api_id;
            s.onload = function(){
                var items = _Class.get();
                Class.trackBatch(items);
            };
            var x = document.getElementsByTagName('script')[0];
            x.parentNode.insertBefore(s, x);
         }
    if (window.attachEvent)
        window.attachEvent('onload', async_load);
    else
        window.addEventListener('load', async_load, false);
    })();

    Class.track("page_view", {"page":"plans"});
</script>

Answer 1

In all major current browsers, the script element's onload can be used:

s.onload = function() {
    /* ...this is called when the script is loaded, so `Class` should
       be available...
    */
    Class.track("page_view", {"page":"plans"});
};

In older versions of IE, you had to use onreadystatechange instead and check that the element's readyState property was the string "complete" .

Alternately, of course, you can use setTimeout or setInterval to poll for a global symbol ( Class , in your case, I suspect) you create (via typeof , eg if (typeof Class === "undefined") { /* ...schedule another check in a few milliseconds... */ } ).