preloading of images and the cache

[christine clarin]

hello! i hope you can help me with this:

i am getting confused with the concept of preloading images and caching.you see, i'm building a site which is like google images where in all images in the database are shown in thumbnails within a page.now, i am looking for ways to make the loading of these images faster since the number of the images are getting bigger. when i searched thru the net, i was advised to use preloading of images via javascript which says that i am saving these images within the cache of my local machine. what confuses me though is that even if i don't have this preloading javascript code in my application, firefox and IE still saves my images in their cache automatically. so why do i still have to preload? and why are my images loading slowly even though the images are already in the cache... help! please! thanks. by the way, here are some snippets of my codes:

this is how i show the thumbnails of the image (i just resize, is this adviseable, or is there any other way?):

<td> <img src = "<%=x.getImagePath() %>" height="100" width="100" name = "img" id="img" />

this is the code i got for preloading:

var myPic = new Image(100,100);
myPic.src = "<%= x.getImagePath() %>"

is this correct? thanks! any help would be greatly appreciated.

[Eric Pascarello]

The idea about preloading is you load them before you need them. You do not do both at the same time. So you load 5 images and you also preload the next 5 images.

Eric

[christine clarin]

i'm still not quite sure if i understand correctly, so in my case, will preloading be needed to load my thumbnail images faster? or is the caching by the browser ok? do you have any advice on how i can load the images faster?

[Eric Pascarello]

Prloading images means it will load things BEFORE they are needed. Say you had 5 pages of images. You can start to load the second page while the user is looking at the first page.

IE is limited to 2 connections to the same domain so that is why it takes awhile to load the images. Look how big the files are, did you actually make smaller images or did you just change the height and width in the HTML markup?

Also the type of image file matters. Make sure you are not using some format that has a huge file sie.

If you look at sites hat display a lot of images, they use sub domains to display them. Why? Because IE sees sub domains as seperate domains and allows for more connections.

< img src="http://foo1.yourdomain.com/images/im1.jpg" />
< img src="http://foo1.yourdomain.com/images/im2.jpg" />
< img src="http://foo2.yourdomain.com/images/im3.jpg" />
< img src="http://foo2.yourdomain.com/images/im4.jpg" />

Eroc

[christine clarin]

Originally posted by Eric Pascarello:


IE is limited to 2 connections to the same domain so that is why it takes awhile to load the images. Look how big the files are, did you actually make smaller images or did you just change the height and width in the HTML markup?

-- as for the thumbnails, i just resized it via HTML. is there any other way of doing this? thanks!

[Bear Bibeault]

Originally posted by christine clarin:
-- as for the thumbnails, i just resized it via HTML. is there any other way of doing this

That's not going to do anything for you. All you are doing is send the full-sized images to the browser and telling it to show them in a smaller size.

If you want to send smaller files, create smaller files.
[ December 15, 2007: Message edited by: Bear Bibeault ]