How to speed up loading of this simple image gallery...

I've added a very simple image gallery on my site with few sets of photos.

Here is the link: http://www.astretchout.com/stage/limousine-showroom.html

Problem is that when JS function is preloading all the images, page is not being displayed. Only after all the images are loaded, page is being shown.

Here few parts of the code:

if (document.images) {
image0 = new Image;
image1 = new Image;
image2 = new Image;
image3 = new Image;
image4 = new Image;
... }

image0.src = 'images\/Range-Rover-SUV\/Range-Rover-Limousine1.jpg';
image1.src = 'images\/Range-Rover-SUV\/Range-Rover-Limousine2.jpg';

What change in JS code can I make to speed up process of loading images?

I'd like for JS to load first set of photos, display the page and load the rest.

All photos don't have to show up at the same time.

Any help is appreciated.

 

Maybe this would be better asked in the JS section?

 

UHG, another mouseover show the image site. I keep seeing this and every time I go 'WHY?!?!?'

My advice, just show the thumbnails and only load the images when people click on them - it's WHY thumbnails are used in the first bloody place.

As cute as the effect is, the net result is a bloated page that is PAINFUL to load even on broadband. 700k+ in 40 files can equal 30 seconds or more on BROADBAND.

IMHO this is a good candidate for lightbox.

Of course, the whole site is painful to load given the bloated non-semantic markup, overblown case of classitus, multiple redundant and unneccessary browser conditionals, and things like the dual containers around a footer that doesn't even seem to show up on the page.

Failed validation, 172 Errors Says it all.

 

deathshadow: what did you use to find all the wrong things with design? (besides your experience)?

 

Yup, sorry wrong section...

 

http://validator.w3.org

specifically:

http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

Though the comments before where I quoted it were based on experience and understanding of the specification. Things like:

<td valign="top"><span onMouseOver="swapImage('range','image0')" onMouseOut="swapImage('range','image0')" ;>
						<img src="images/Range-Rover-SUV/Range-Rover-Limousine1s.jpg" width="100" height="71" border="1" alt="" /></span></td>

Code (markup):

for example - there's really no reason those should be in their own sub-table, or to wrap them in a span... or to decalare the border in the HTML

Literally this should be all the HTML that's needed for each of those:

<img src="images/Range-Rover-SUV/Range-Rover-Limousine1s.jpg"
	width="100" height="71"
	alt="Range Rover Limousine" 
	onMouseOver="swapImage('range','image0')" 
	onMouseOut="swapImage('range','image0')"
/>

Code (markup):

Not that I would use onMouseOver/onMouseOut - I'd probably wrap them in a anchor and trap the anchor's onclick method with something like lightbox.

<p id="hummer">
	<h3>2008 Hummer H2</h3>	
		<table id="mytable" border="0">

Code (markup):

There is no reason to wrap those in paragraphs... or to state the border in the html... and honestly that H3 might want to be a TH - that or lose the table alltogether since it's a fixed size layout.

<!--[if lte IE 6]>
<style>
#menuwrapper, #p7menubar ul a { _height: 0px; }
</style>
<![endif]-->

<!--[if lte IE 7]>
<style>
#menuwrapper, #p7menubar ul a {height: 1%;}
a:active {width: auto;}
</style>
<![endif]-->
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="include/iehacks.css" />
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body{behavior:url(csshover.htc);}
</style>
<![endif]-->

Code (markup):

This is usually a REALLY good indication of using the WRONG CSS to create the layout in the first place. The csshover.htc could be loaded behind a * html hack in the CSS reducing the HTML code and increasing the amount you rely on the users cache, the 'iehacks.css' shouldn't even be necessary - the haslayout hack (height:1%) should be able to be fed to all browsers safely so long as the wrapper around what you are targeting doesn't have a height declared... width:auto is the default behavior of block level elements, which there should be NO reason to trip on a hover state, and the underline hack is redundant since it too targets LTE IE6.

The main menu is inundated with a REALLY bad case of classitus, which is odd since it's a CSS menu so there should be no need for all those classes and ID's.

And then there's the linking in of FIVE stylesheets that dont' even total 14k - which I would ballpark only needing about 8-10k in a single file. In my experience multiple stylesheets for anything other than media type is just bad practice.

 

Death Shadow I am currently trying to learn about web coding... interested to see some of the sites you've created. can you send me a few... You sound like you know what your talking about,
thanks

 

deathshadow: thank you for your constructive criticism