SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    May 2001
    Location
    Tallahassee, FL
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Preloading Images

    I have 19 images in my design that I would like to preload. Putting the code in the head section makes the page coding a little heavy. Will the preloading still work if I make it an external javascript?

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,832
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dmwhipp View Post
    I have 19 images in my design that I would like to preload. Putting the code in the head section makes the page coding a little heavy. Will the preloading still work if I make it an external javascript?
    yes but if the script is called from the head then it still will not make any difference (apart from having to single thread load the JavaScript before it can start loading any of the images)
    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="^$">

  3. #3
    SitePoint Zealot
    Join Date
    May 2001
    Location
    Tallahassee, FL
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    yes but if the script is called from the head then it still will not make any difference (apart from having to single thread load the JavaScript before it can start loading any of the images)
    So would it be better to leave the script in the head of each page? Or should I make and external and, if so, from where do I call it?
    Thanks,
    Deborah

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,832
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You'd do better to move the image loading to the bottom of the body. That way the current page loads fully first and then the images you are preloading for later pages load while the person is viewing the current page.
    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="^$">

  5. #5
    SitePoint Zealot
    Join Date
    May 2001
    Location
    Tallahassee, FL
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you tell me if this example would this be correct please (and if the scripting looks right):

    <script language="javascript" type="text/javascript">
    if (document.images)
    {
    img1 = new Image();
    img2 = new Image();
    img1.src = "/graphics/1x1.gif";
    img2.src = "/graphics/logo.png";
    }
    </script>
    </body>
    Thanks,
    Deborah

  6. #6
    SitePoint Zealot
    Join Date
    May 2001
    Location
    Tallahassee, FL
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can someone give me any tips on a good preload image script? The one I'm using is from 2 years ago and I'm not sure if there's a better one out there. I need one that does need to specify image dimensions if possible.
    Thanks,
    Deborah

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,832
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dmwhipp View Post
    I need one that does need to specify image dimensions if possible.
    The image dimensions are built into the images themselves and also has nothing whatever to do with preloading of images since the display dimensions at the time of preloading will always be 0x0.
    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="^$">

  8. #8
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dmwhipp View Post
    Could you tell me if this example would this be correct please (and if the scripting looks right):



    Thanks,
    Deborah
    Your probobly better off putting the preloaded images within the top of the document.
    Code JavaScript:
    <script type="text/javascript">
    if (document.images) {
        Image[0] = newimages();
        Image[1] = newimages();
        Image[2] = newimages();
        Image[3] = newimages();
        Image[4] = newimages();
        Image[5] = newimages();
        Image[6] = newimages();
        Image[7] = newimages();
        Image[8] = newimages();
        Image[9] = newimages();
    }
    </script>
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,832
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by BlakeAnthony View Post
    Your probobly better off putting the preloaded images within the top of the document.
    That's where they'll slow down the loading of the page the most. Since preloaded images are not going to be actually visible until after some other action is taken you are better off letting all the visible parts of the page load first and load the images that you are preloading for subsequent use after that.
    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="^$">


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
  •