View Full Version : pre-loading images for website

10-06-2007, 10:25 PM
how do I have the web site load up all the images on the index page or w/e so that when they go to new pages, they don't have to load everything on the spot?

10-06-2007, 10:47 PM
You could but since that is the page that you want to load quickest (meaning it should be under 30k in total size including all images and scripts) doing so will probably have the effect of driving people away from your site before they get started.

10-07-2007, 03:00 AM
what do you suggest? can i spread out the loading of images on different pages that I choose?

10-07-2007, 08:04 AM
well any image is cached so if you use the same 4 images on all of your pages, the first page will take a bit to load but rest will load quickly.(like felgall said kind of)
Remember that the first page is the one that makes an impression. You want the home page to look the best and load the fastest. Chances are if they like the first page, they will be willing to wait longer for the second page to load.


10-07-2007, 10:41 AM

10-07-2007, 01:06 PM
3 posts above you.

Look up.


Senior Coder

10-08-2007, 01:05 AM
Unless your images are really huge or your visitors are on a very slow dial-up connection there is not a lot of point in pre-loading.

One way that shouldn't affect page loading speed too much would be to call all your larger images (i.e. bigger than thumbnails) into a div which uses either visibility: hidden, or left-margin:-9999px to hide it from being displayed. In the html size the images as 1px x 1px, then use a server side include to place the div in the code at the bottom of each page.

That way all the images will start loading into the cache whichever page the visitor lands on.

10-08-2007, 02:30 AM
the 'load all' method may use more bandwidth then you really want to... If they come to one page and have to load all 20 images but only 2 are on that page, and then they leave, you've just wasted that bandwidth that could be used by someone else who actually wants to see the images.
Unless the images are HUGE or the users have no interest in them, they will wait for them to load.

An alternative option is to use what most image editors call the 'progressive browser display' function. The result is slightly larger image sizes, but the browser displays them line by line as they load.


10-09-2007, 05:29 PM
thanks a ton. I think I will use the div off the screen method, thats brilliant! And yes, most of these images are big but there are not too many, im going to put the load on the sub pages for loading, if they like my first page, they will be much more likely to stick around for the image loads. Thanks again.

10-09-2007, 05:32 PM
you can preload images with javascript


10-09-2007, 09:28 PM
here is a image preload script, but as suggested above you may only want to preload images used on every page and the entire site itself should be relatively small in size.
The 125 signifies Height and the 25 signifies Width.
Save this as a .js file


var= new Image(125,25)
var.src = "image1_location.gif"

var2 = new Image(125,25)
var2.src = "image2_location.gif"


Now just put <script type="text/javascript" language="Javascript" src="http://www.yoursite.com/scripts/preload.js"> in the <head> of your site.