JavaScript loading even before HTML loads

JavaScript
1

Hi,

I am just beginning to learn JavaScript. I am following the book “Simply JavaScript” purchased from sitepoint. I just started the DOM and am trying to
write code for counting the elements in a webpage.

The count of the elements is always displayed as zero even though it’s not true.
I am writing the code in an external file and linked it to the web page.

The code is working fine if i place it as inline in the webpage itself. How should i tell the browser to load HTML first and JavaScript later?

Thank You,
Sri.

2

It’s fine to put the JS links at the bottom of the HTML, just before the </body> tag.

Read this:

Otherwise you need some extra JS to tell the script only to run when the page has loaded.

3

Hi,

Thanks for the quick response. This Js links at bottom technique is working.

4

Instead of of putting your javascript just above the </body> you can use the onload method of the window object to run js code after the window has loaded. This is especially useful if you have images you’re swapping or animating. Running js after onload ensures all images have been loaded. Not all images might have been downloaded when running the js code just above </body>

<head>
     <script type="text/javascript">
           window.onload = function() {
                //run js code here
           }
     </script>
</head>
5

Thanks for the reply.
So, i just need to wrap all my code with a function and place it
in the window.onload, right?

6

There are some significant problems with that technique though. First, you cannot have multiple scripts automatically assigning the onload event, because one will replace the other. Second, the onload event loads very late, compared with putting the script at the bottom.

When the page is loading, it runs the scripts at the bottom of the body as soon as it gets to them. After they have finished loading the ondomready event fires on some web browsers, after which the web browser continues to load images and other content for the page. Only after the page has fully completed loading does the onload event fire.

Putting your scripts at the bottom of the web page is one of the best practice for [url=“http://developer.yahoo.com/performance/rules.html”]speeding up your web site.

7

Thanks, but as mentioned in the above post, i do have to swap images later on in my project. So, wont this technique of putting the script at the bottom will have an effect on the images?

And, i know this is not the appropriate thread to post, but can you please have a look at http://www.shirtsmyway.com/design_myshirt.php and advise me what technology is used for rendering the shirts… That would be very helpful.

Thank You.

8

Yes. You can run whatever js you like in the onload.

9

None of the above-mentioned script loading techniques will have any impact on your swapping of images.

Transparant images that are layered on top of each other.
For example: http://www.shirtsmyway.com/graphics/view2/basebackstyle/tail/b7_view2_basebackstyle_tail.gif

10

With the js I normally have to run, I don’t notice any difference in page load times whether the js is in the head or just above the </body>. But a page will “appear” to load faster if the js is above the closing body tag because the overall total page loading time will be the same or very close to it. As I said before, if I need to ensure images that my js uses have completed downloading, I will put the js in the onload.

11

Thanks for giving the insight in to the technique used in the shirts website. Please correct me if i am wrong. They are actually putting together a set of already designed images together, right? And this can be done through Ajax?

12

JavaScript itself is quite capable of loading new images into the page at any time - you don’t need Ajax to do that.

There is nothing that a script running inside of a function attached to onload can do that one loaded at the bottom of the page can’t do.

Loading the script at the bottom of the body rather than in the head makes the page appear to load faster as the rest of the page doesn’t have to wait for the script to download first.

13

Isn’t that what I also said when I said

But a page will “appear” to load faster if the js is above the closing body tag because the overall total page loading time will be the same or very close to it.

Then since the overall total page loading time is much, if not, the same whether the js is in an onload or above the closing body tag then there is no significant disadvantage in using onload as far as I can see.

14

The earliest you could have it load is as the first thing in the head; therefore loading before the html, which is in the body unless you have another script in the head that writes html. However, having as the first thing in the head should make it load first.