CODEWITHSUNDEEP
javascriptjqueryhtmlhttp
oshirowanen
oshirowanen

Reputation: 15925

What is loading first in this script?

In terms of loading order, what is happening in this script? Does the divLoading div tag finish loading before the jquery libraries finish loading? And, do the libraries start loading before the divLoading div tag is created on the users screen?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
    </head>

    <body>
        <div id="divLoading">loading...</div>
        <img src="http://goes.gsfc.nasa.gov/pub/goes/060619_fulldisk_color.jpg" />
    </body>
</html>

Upvotes: 1

Views: 348

Answers (4)

picus
picus

Reputation: 1537

Not to reiterate what has been posted, but the js will load first and will block any other elements from being downloaded, hence it is a best practice to move all of your scripts to the bottom of the page, if you are using jquery, than I am assuming you are using the document.ready listener to wrap all of your actions. If this is the case, any actions would not take place until the DOM is ready so there w(sh)ould be no harm in moving the files.

http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/

This is a good question in that it raises a fundamental concept in HTTP client/server interaction.

Upvotes: 0

Chris Pratt
Chris Pratt

Reputation: 239220

Scripts are run serially in the order in which they're referenced. So, jQuery will be loaded first and then jQuery UI. (The browser might download both at the same time, and may or may not finish downloading one before the other, but processing will be ran first-in/first-out.)

JavaScript, also, is blocking (nothing else on the page will load), so the scripts will be entirely downloaded and processed before the browser even considers what is in the body tag.

Upvotes: 0

Raoul
Raoul

Reputation: 3889

Jquery is requested, jQuery UI is requested. You don't have any JavaScript code to wait for the page to render or anything. You can use Firebug to investigate what gets loaded, when and how long it took:

http://getfirebug.com/

Upvotes: 0

Quentin
Quentin

Reputation: 943134

JS is blocking, so HTML parsing will pause while the scripts are loaded.

Upvotes: 3

Related Questions