preload images

They have: 17 posts

Joined: Dec 2001

how can I make my pages load faster? is there any script for that including all pictures in a page not for one picture?

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

put them in an array in the element.

<script type="text/javascript">

if document.images {

nameImg = new Image

nameImg.src = "image_location.jpg"

}

</script>

Smiling Suzanne

They have: 17 posts

Joined: Dec 2001

It is ok but I think that script is for an individual one I mean just for a picture isn't it suzanne?

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

At the risk of spelling it out too clearly, you would make one of each of those lines for each picture...

It's called an array.

<script type="text/javascript">
if document.images {
nameImg0 = new Image
nameImg1 = new Image
nameImg2 = new Image
nameImg3 = new Image
nameImg4 = new Image
nameImg5 = new Image

nameImg0.src = "image0_location.jpg"
nameImg1.src = "image1_location.jpg"
nameImg2.src = "image2_location.jpg"
nameImg3.src = "image3_location.jpg"
nameImg4.src = "image4_location.jpg"
nameImg5.src = "image5_location.jpg"
}
</script>

... et cetera. I recommend you wander over to javascriptworld.com and buy yourself Dori's book on JavaScript for the WWW -- cheap and it will explain all this sort of thing for you.

Suzanne

They have: 17 posts

Joined: Dec 2001

What if I put on the page leading to the image loading slower

does this load the image into the browsers cache before they arrive on that page, speeding up the load time by a huge amount? does it work?

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

What if the person doesn't want to view that page that the big image will be on? Then they have downloaded the image for nothing.

What are you trying to do? Sure you can hide things, but it's not good practice. If you want to show an image, such as a larger photo, use thumbnails. When people CHOOSE to view larger images, they are willing to wait.

Instead of casting about trying to be sneaky, why not tell us what your goal is, perhaps there is a solution out there that will solve your problems.

Suzanne

Busy's picture

He has: 6,151 posts

Joined: May 2001

the 1x1 trick is a bad one and shouldnt be used, what happens is the whole image loads and actually slows your loading time down as it may load them first, so the page loading them will appear dead (nothing there) or give the wrong impression that your whole site is very slow loading and it doesnt just load 1x1 pixels of it, it loads the whole thing.

bottom line, this method actually works against the thing your trying to do, which is speeding load times.

best bet, preload and/or thumbnails as Suzanne has mentioned, and/or compress your graphics, limit use of javascript and other fancy stuff.

being sneaky will work against you, visitos dont like suprises (if you are)

Busy's picture

He has: 6,151 posts

Joined: May 2001

Is there any difference in using a preload script like mentioned above to a onload preload script in the body tag ?

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Having the function for the images with the array in the head of the page (especially as a global .js file) increases the functionality of the site. You can have a lot more control than having in inline (in the body element).

It also decreases load time having it in the head element as a global .js file if you need the images on multiple pages of a site.

Suzanne

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.