Pre Load Images 1

[Dashsa]

Hello,
I have a site with a gallery, at the moment when you load the page the images load from the top of the page, Is it possible to preload the images so that they do not load from the top and fall?

[URL unfurl="true"]http://marshlandmillworks.com/specGallery.html[/URL]

thanks

 

[Ascalonian]

Check out this site about preloading images.

 

[traingamer]

Another thing you might want to consider is optimizing the images. They will load a lot faster if they are smaller and it looks like you could reduce them substantially with little loss of quality.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[johnwm]

I notice that you seem to be unhappy with your answers in the forums,as you have asked 38 questions, and only marked 2 answers as valuable. If you are getting poor answers, read faq222-2244. If you are getting valuable answers read faq222-2244 to see how to acknowledge them. The FAQ will also show other ways you can contribute to these forums, for instance by answering a few questions for others, or financially.

For this question, there are several contributory factors.

1. As traingamer says, your images are uncompressed, and far too big for web use. Have a look at

http://www.websiteoptimization.com/

for help.

2. With those large picture files loading slowly you should give your images height and width so the browser can set its layout while the pictures load.

3. Your site has lots of validation errors. See

http://validator.w3.org/check?verbose=1&uri=http://marshlandmillworks.com/specGallery.html

4. Information on the linked 'preload images' site is well out of date and may prove misleading.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[Dashsa]

johnwm,
Thanks for the tips!
I think that by adding in the width and heights to all the images on the pages really made the difference, I also optimized the images and they are all below 100kb. As for the W3c Validation, my pages were actually pretty good but the hosting company I use stuck in some JavaScript for their stat tracker and that was throwing the errors but as soon as I got them to remove it all the pages validated.
You will notice that the text on the site is actually images because the person who designed the site wanted a specific look. What are your thoughts on this? I know it is bad for SEO but I was thinking about making a div with the text in it and just hiding the div so that the page will still get crawled.
If you have time your thoughts would be a great help!

Thanks again
D

 

[spamjim]

I also optimized the images and they are all below 100kb

You could do a lot better. I'm still seeing 379 KB of total image data. (and that is not calling the images that load for the rollover (1.jpg ... 10.jpg)) You could easily have a few MB of images there. This is why it takes so long to display. Shoot for cutting that cumulative file size by at least half.

 

[johnwm]

I would expect 80 x 80 px thumbnails to be around 2-3K rather than 8-9K using around 70% image quality (30% compression) for a JPG. Similarly your bigger pics should be 30-35K rather than 60-70K with the same sort of compression levels. You might also look at one of the standard javascript image packages (such as floatbox) which would enable you to get all the large images via AJAX rather than front loading them.

The use of images to replace text (known as F.I.R technique) is well known, but has potential problems with some browsers. Some people are now using an updated version.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[Vragabond]

Using image replacement techniques is OK for certain fancy titles but should not be used for all the text one the page. The way you use images is excessive. Paragraphs of text should always be just text. If I want to make your font larger because I cannot read it, I can't. I can only enlarge the image, which messes up the entire page.

Replacing your slogan, menu items, titles, paragraphs of text and footer can all be done by using simple text and appropriate font. All the font styling that exists on the image can be applied to the normal text as well.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]