SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best code to preload (not for rollovers though!)

    I need a preload script that will load say 5 images...but it need not include any coding for rollovers. I have a site that offers some info to read on the index page...so before going into the main site, and I'd like to use the time that the visitor spends on the first page to preload images that are displayed on the next page. Obviously the goal is to speed up the load-time of "page2," while not making it apparent that it's happening on "page 1" ... does that make sense?

    Any help would be greatly appreciated!

    Also...Is JS the only option I have for the script? (I'm almost positive that WinXP doesn't include Java by default.)

    Thanks!

    audio

  2. #2
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Netherlands
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mozilla has something called link prefetch.
    http://www.mozilla.org/projects/netl...ching_FAQ.html
    So in Mozilla no scripting is necessary.

    I think the best way to handle this, is to make a script which mimicks this behavior of Mozilla for browsers who don't support this feature.

  3. #3
    SitePoint Zealot tss68nl's Avatar
    Join Date
    Nov 2002
    Location
    Netherlands
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First off, Javascript is not Java. IE includes the ability to use javascript, on all platforms. So does Netscape, only dodgy at times. In addition, IE provides you with Jscript (which is not Javascript nor Java) and VBScript. Needless to say Netscape doesnt support those, so you best stick to Javascript.

    Code:
      oImg1 = new Image();
      oImg1.src  = "theimage.jpg";
    Thats the normal code to load an image with javascript. The trouble is, in most cases you have to assign the oImg1.src to the image src property, or else it'll fetch it again. Since the oImg1 object(s) will be gone as soon as you load up a new page, I dont think thats going to work.

    You can take two directions from here, first being to make use of a framed setup. Making a 1 pixel frame that will hold your javascript cached images will make sure you can assign them to the <img> placeholders as soon as the second page loads which needs them.

    Instead you might try to assign the data to some <img> objects directly in the file that you've handily hidden by the means of the css visibility property of the image. That way they've been actually loaded onto a page before you visit the other page. Ofcourse you best not hardcode them into the initial file, as that'll make the first page slow. Instead, make a javascript function that executes from the onLoad event of the body element, and then write the contents of a predefined empty div with the proper image tags to your images. Be sure to set the DIV to a predefined size (I suggest 5 by 5 pixels or so), visibility to none, and overflow scrolling on, so it does not resize to it's contents.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I appreciate the comments...

    Anyone else...?


    ...preferably not so esoteric!

  5. #5
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    onload = function() 
    		{
    			var preloadURLs = [ 'blah1.gif' , 'blah2.gif' , 'blah3.gif' , 'blah4.gif' ];
    			var i = 0, pU_length = preloadURLs.length;
    			for (i; i < pU_length; ++i)
    			{
    				preloadURLs[preloadURLs.length] = new Image();
    				preloadURLs[preloadURLs.length - 1].src = preloadURLs[i];
    			}
    		}
    Last edited by adios; Nov 3, 2003 at 12:11.
    ::: certified wild guess :::

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you! That is exactly what I needed!


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
  •