10 replies [Last post]
Toucan
Toucan's picture
Offline
newbie
Virginia, USA
Last seen: 17 years 43 weeks ago
Virginia, USA
Timezone: GMT-5
Joined: 2004-09-03
Posts: 9
Points: 0

Just joined the forum, so Hello to all

I am just learning CSS and XHTML so I can build some personal web sites.

Is there a way to preload Images maybe through a script so my Images throughout my site will load faster. Maybe load them all in the Home page so when a viewer links to other pages the images will already be loaded.

I hope that made sense.

If there is a way. Would it be put in the CSS file or in the XHTML file?

Thanks in advance,
Gary
Cool

Tags:
Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 14 years 13 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

Peloading Images - Newbie Question

This little one works, however not sure if it works across all browsers. It's a cut and paste job from ImageReady's generation of a page Wink

<script language=JavaScript type=text/JavaScript>
<!--
function MM_preloadImages() 
{
	var d=document; 
	if(d.images)
	{ 
		if(!d.MM_p) d.MM_p=new Array();
	
		var i,j=d.MM_p.length,a=MM_preloadImages.arguments; 
		for(i=0; i<a.length; i++)
		
		if (a[i].indexOf("#")!=0)
		{ 
			d.MM_p[j]=new Image; 
			d.MM_p[j++].src=a[i];
		}
	}
}
//-->
</script>

That code would go between the <head></head> tags.

I am Dan, Dan I am.

Toucan
Toucan's picture
Offline
newbie
Virginia, USA
Last seen: 17 years 43 weeks ago
Virginia, USA
Timezone: GMT-5
Joined: 2004-09-03
Posts: 9
Points: 0

How does the Script know what to load?

If I put that script in between the Head tags, how will the script know what to pre-load?

Am I suppose to modify that script by listing the image file names?

If so, how?

I guess I need to do some more homework!!!

Thanks for your help,

Gary

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Peloading Images - Newbie Question

Hi Toucan,
In that script it looks for the images in the functions arguments.
So you need to pass them to the function like:MM_preloadImages("imageOne.gif", "imageTwo.jpg", "anyMore.gif");

Toucan
Toucan's picture
Offline
newbie
Virginia, USA
Last seen: 17 years 43 weeks ago
Virginia, USA
Timezone: GMT-5
Joined: 2004-09-03
Posts: 9
Points: 0

Preloading Images

Thanks Tony,

Do I also have to put the image files names in the brackets after the word "ARRAY"

Thanks
Gary Tongue

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Peloading Images - Newbie Question

Hi Toucan,
No, just separate the images with a comma then the function will use the arguments array.


Hope that helps

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 14 years 13 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

Peloading Images - Newbie Question

Sorry about that missed out some info :?

I am Dan, Dan I am.

Toucan
Toucan's picture
Offline
newbie
Virginia, USA
Last seen: 17 years 43 weeks ago
Virginia, USA
Timezone: GMT-5
Joined: 2004-09-03
Posts: 9
Points: 0

Preloading Images

Fruitcake & Tony,

Thanks for your help.

I do have a couple more questions.

Since I am going to preload all of my images, lets say on the index page. Will this make the first page load very slowly?

Or, will this script load the images after the index page completely loads?

You gotta love the forums!!!
Laughing out loud

Gary

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Peloading Images - Newbie Question

Hi Toucan,
Lets go back to the start, I should have asked this first up. Smile
Why do you need to preload images?
How many images?

The biggest benefit of preloading images is usually when they are used for rollovers.
There are other ways to do rollovers that don't require preloading of images.

You not going to gain any real benefit by preloading images on the homepage then displaying them on other pages.
The images still need to be downloaded and will still be cached either way.

I suggest you forget about preloading and work on minimizing the number and file size of the images.

You may be able to use background-color instead of images in some cases.

If you provide a link to the site we may be able to provide a more accurate solution.

Hope that helps

Toucan
Toucan's picture
Offline
newbie
Virginia, USA
Last seen: 17 years 43 weeks ago
Virginia, USA
Timezone: GMT-5
Joined: 2004-09-03
Posts: 9
Points: 0

Preloading Images

Hi Tony,

Actually I am just starting to design the site. Nothing to post for you to review. The site will be a personal site showing pictures of family vactations and school events of our children.
There will be about 10 - 25 pictures which will be updated periodically.

I was also asking about preloading images because I'm thinking about doing a site for our company. Which would have probably about 50 - 100 pictures showing products and services. But that site is way down the road since I'm just learning.

So the personal site is my first step to web design.

I'll probably disregard that script after reading your last post and consentrate on file size.

Thanks for your help.

Gary
Laughing out loud

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 9 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Peloading Images - Newbie Question

Go with that. For the personal site, don't bother about preloading - friends and family will wait for them to download.

As for the business site - you want to compress everything as much as you can without losing quality, so bandwidth isn't wasted.

You only really need to preload images for rollovers.

Check out www.eugenematthias.com to see what I used the preload script for. It should be called something like rollover.js,

Verschwindende wrote:
  • CSS doesn't make pies