SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy JavaScript loading even before HTML loads

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    It's fine to put the JS links at the bottom of the HTML, just before the </body> tag.

    Read this:
    http://www.sitepoint.com/forums/showthread.php?t=663717

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

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It's fine to put the JS links at the bottom of the HTML, just before the </body> tag.

    Read this:
    http://www.sitepoint.com/forums/showthread.php?t=663717

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

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

  4. #4
    Non-Member
    Join Date
    Jan 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

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

  5. #5
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dantel View Post
    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>

    Code:
    <head>
         <script type="text/javascript">
               window.onload = function() {
                    //run js code here
               }
         </script>
    </head>
    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. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dantel View Post
    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.
    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 speeding up your web site.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    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 speeding up your web site.
    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. #8
    Non-Member
    Join Date
    Jan 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by harshavarma View Post
    Thanks for the reply.
    So, i just need to wrap all my code with a function and place it
    in the window.onload, right?
    Yes. You can run whatever js you like in the onload.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by harshavarma View Post
    Thanks, but as mentioned in the above post, i do have to swap images later on in my project.
    None of the above-mentioned script loading techniques will have any impact on your swapping of images.

    Quote Originally Posted by harshavarma View Post
    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.
    Transparant images that are layered on top of each other.
    For example: http://www.shirtsmyway.com/graphics/...style_tail.gif
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    Non-Member
    Join Date
    Jan 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    There are some significant problems with that technique though
    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. #11
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    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/...style_tail.gif
    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. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,799
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  13. #13
    Non-Member
    Join Date
    Jan 2011
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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.
    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. #14
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •