javascript – dsgriffin Dec 10 '13 at 00:03

  • 1
    possible duplicate of [What does a script-Tag with src AND content mean?](http://stackoverflow.com/questions/6528325/what-does-a-script-tag-with-src-and-content-mean) – Rob W Dec 10 '13 at 00:03
  • well its not about using anything. I am not stuck - I just want to figure out what will happen in this case - in all browsers – Tintin Dec 10 '13 at 00:03
  • 4 Answers4

    1

    alert('hi') would never fire, as the script tag supports either inline code or external file code..

    Read the specs at http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.1

    The script may be defined within the contents of the SCRIPT element or in an external file. If the src attribute is not set, user agents must interpret the contents of the element as the script. If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI.

    Gabriele Petrioli
    • 191,379
    • 34
    • 261
    • 317
    • Thanks Gaby. Okay if I move to alert('hi') in another script tag BELOW it, would it always fire after downloading the top file? I dont think so - what if I want to execute certain code only AFTER downloading a file (no matter how long it takes) - I am currently using "onload" attribute (this is how I am doing it) var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = url;script.onload = callback; is there any other way of doing it - (without using jquery) – Tintin Dec 10 '13 at 00:19
    • Yes, script tags are loaded/executed in sequence (*unless otherwise specified by you with the `defer` attribute*). – Gabriele Petrioli Dec 10 '13 at 00:21
    • .. but why are you adding the script through code and not with a `script` tag ? – Gabriele Petrioli Dec 10 '13 at 00:24
    • because url for src has to be computed at run time. – Tintin Dec 10 '13 at 00:27
    • I am not very sure about your statement " scripts are loaded/executed in sequence (unless otherwise specified by you with the defer attribute)". I have seen parallel loading of scripts! – Tintin Dec 10 '13 at 00:28
    • @Tintin, not when using `script` tags.. You are adding the script dynamically so i am not very sure about this case.. i will do some tests and be back.. – Gabriele Petrioli Dec 10 '13 at 00:29
    • http://blogs.msdn.com/b/kristoffer/archive/2006/12/22/loading-javascript-files-in-parallel.aspx – Tintin Dec 10 '13 at 00:31
    • yes, it looks like it loads in parallel when I add them dynamically. – Tintin Dec 10 '13 at 00:31
    • @Tintin, indeed.. some tests on plunker show that dynamically loading scripts means they are asynchronous. so you have to use the `onload` trick.. – Gabriele Petrioli Dec 10 '13 at 00:40
    1

    No. The presence of a src attribute will cause the descendant nodes of the element to be ignored.

    If you had two script elements, then the second script would still always execute second because script elements are blocking.

    Only if you had two script elements and the first had defer or async attributes could the second execute before the first.

    Quentin
    • 914,110
    • 126
    • 1,211
    • 1,335
    • So how do I make sure to call a function only when a src javascript has been downloaded. The way I am doing it is by calling a calbank function on "onload" of script dynamically. var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = url;script.onload = callback; But I wanted to know if this could be done in some other way as well? – Tintin Dec 10 '13 at 00:08
    • `` as per the second paragraph of this answer. – Quentin Dec 10 '13 at 00:11
    • so in this case foo() will be called only after foo has been downloaded? No matter if its taking too long? I thought browser starts downloading the source and moves on (instead of waiting for download to complete)? – Tintin Dec 10 '13 at 00:14
    • As I said, script elements are blocking. Unless you explicitly say it can be loaded asynchronously, browsers won't run anything beyond it. It might document.write (for example). This is why there is a common recommendation to put all scripts immediately before `

      `.

      – Quentin Dec 10 '13 at 00:17
    • I could not remember the browser name but I have seen asynchronous loading of scripts (which resulted in exception) in one of the scenarios and that is when I HAD to use onload callback. It doesnt happen with chrome and mozilla though. – Tintin Dec 10 '13 at 00:21
    • http://blogs.msdn.com/b/kristoffer/archive/2006/12/22/loading-javascript-files-in-parallel.aspx – Tintin Dec 10 '13 at 00:29
    • @Tintin — That's adding script elements with JS. We're talking about just having them in HTML. – Quentin Dec 10 '13 at 00:31
    • yeah. I did not know this thing and thats why gotten into this confusion. So, when I am doing so in code - the only way I could make sure is by using onload callback I guess. Thanks. – Tintin Dec 10 '13 at 00:34
    0

    If you had the below code and didn't want your alert('hi') to fire until all scripts have downloaded, you can wait for the document ready event. You can do this using jQuery, or with vanilla JavaScript.

    <script src="takes very long to download" type="text/javascript"></script>
    <script type="text/javascript">
       alert('hi');
    </script>
    

    To defer until all scripts have loaded using jQuery:

    $( document ).ready( function () { 
        alert('hi');
    });
    
    damienc88
    • 1,957
    • 19
    • 34
    0

    that is because you cant import a script like that and in the same script element run javascript... because the external script will override your written javascript.... put them in different tags... also for a faster js import make a mock js src

    Viraj Shah
    • 754
    • 5
    • 19