async js loading sequence

Question

I am trying to do something that uses the async loading pattern as bellow:

<div id="mydiv">
    <script type="text/javascript">
        var test = .......;
        function() {
            var js = document.createElement('script');
            js.async = true;
            js.src = 'myscript.js';
            var first = document.getElementsByTagName('script')[0];
            first.parentNode.insertBefore(js, first);
         })();
    </script>
<div>

Then inside myscript.js I work on the assumption that the div with id mydiv is guaranteed available when it myscript.js is executed. Is this assumption valid? It sounds really should be the case. But i sometimes run into situation the code couldn't find the div inside myscript.js.

Also regarding the general page loading. does all the tags get loaded first? what happens when this async loading pattern happens? does it get loaded after all the original tags gets loaded first?

Thanks,

Matti Virkkunen · Accepted Answer · 2012-02-12 22:31:58Z

1

Put the script element outside the div element, after it. Elements are created in sequential order, and script elements inside the body are executed as they are created, so this will guarantee that the div will be available when the script is executed.

This also avoids a nasty error on IE where modifying the elements containing a script block from within the script block causes it to refuse to render the page entirely.

answered Feb 12, 2012 at 22:31

Matti Virkkunen

65.4k9 gold badges138 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user776635 Over a year ago

you mean like: <div/> <script/> I didn't notice the IE bug you mentioned. Either way, could the missing Div problem I described be possible?

Matti Virkkunen Over a year ago

@userrandomnumbers: I'm not sure what you mean.

user776635 Over a year ago

"But i sometimes run into situation the code couldn't find the div inside myscript.js." As described in my original post.

Matti Virkkunen Over a year ago

@userrandomnumbers: Yeah, I read your comment before you were done editing it. I've never seen the problem you're running into, but putting the script element after the div will guarantee that everything loads in the correct order.

Collectives™ on Stack Overflow

async js loading sequence

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related