ansaurus

Question

jQuery, do something after loading external files.

Answer 1

A:

Try using jQuery.getScript: http://docs.jquery.com/Ajax/jQuery.getScript

You can specify a callback that will run when the script is loaded.

David 2010-01-05 11:02:01

I guess the point is to load jQuery, so by definition at the time you load it, you can't use it.

subtenante 2010-01-05 11:04:31

Answer 2

+1 A:

You're already lucky that your script doesn't crash while calling $ function in $(document) :)

Here is an example.

test.js:

function sleep(milliseconds)
{
    var end = new Date().getTime() + milliseconds;

    while (new Date().getTime() < end);

    document.write('external script executed<br/>');
}

sleep(3000);

test.html

<html>
<head>
    <title>test</title>
    <script type="text/javascript">
        var fileref=document.createElement('script');
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src", "test.js");
        document.getElementsByTagName("head")[0].appendChild(fileref)

        document.write('page script executed<br/>');
    </script>
</head>
<body>
</body>
</html>

test.html loads test.js before writing to the document. If you expect the result to be:

external script executed

page script executed

... then you're wrong.

When you append a <script> element to the <head> of your page, the appendChild() function returns immediatly after the element is added, it doesn't wait for your script to be fully loaded. In the example above the output will be:

page script executed

external script executed

That's the reason why I said that you're lucky to be able to use jQuery at a time you wan't be sure it's fully loaded.

A workaround to this problem would be to append your $(document).ready(...); as a script to the <head> of your document. You could expect that a normal browser - if you see what I mean - would load and execute the scripts in the order you added them to your page.

    var pageScript = document.createElement('script');
    pageScript.setAttribute("type", "text/javascript");
    var pageScriptSource = document.createTextNode("document.write('page script executed<br/>');");
    pageScript.appendChild(pageScriptSource);
    document.getElementsByTagName("head")[0].appendChild(pageScript);

Tested with FF and IE. Works in FF...

It's not a complete solution, but I don't have time (and don't want) to find a hack for IE ;)

ybo 2010-01-05 12:47:18

ansaurus

tags:

views:

answers:

jQuery, do something after loading external files.

related questions