Can I add a Loading.gif while images load on my custom pages?

[flashy275]

Thanks for reply & sorry for delay...I have now registered to receive email in furure re this thread.

The site is not live yet, it's only on my local server but the images are pretty big.

The idea of this page is to dump approx 50 thumbnails along with 50 pre loaded larger images for image swapping. The lag even on my own server is a couple of seconds, which is why I am trying to advise the user of the delay.

All images have been optimised.

Even if I can make the page load a little quicker, it's good to know how to do these things.

[rstevenson]

50 thumbs and 50 large, eh? Even at the most compressed, that'll end up being at least 5MB for that page. And for what? A hover effect?

I agree that spiffy effects can be pleasant for the site visitor, but if they're offset by the unpleasantness of waiting, they will end up being counterproductive. In short, your visitors won't stay around, with or without a "loading" image.

One solution might be to break up that page into smaller versions, interlinked, so there's less to load on each page. Another would be to re-think the visual effect entirely. Maybe use larger thumbs and no rollovers, or something like that. Without seeing what you're trying to do it's hard to be specific with recommendations.

Rob

[flashy275]

Hi Rob,

Just checked as it's been a while since I looked at this. 190 images to pre load!

It's a colour checker, the user selects a colour for the door from 25 thumbnail images, this then loads another page with 190 images & same thumbs, depends on which door colour is selected to size of preload, varies from 7MB to 12MB (not good)
Will have to take another look & hence why loading.gif was important.

Steve

[rstevenson]

Reminds me of the La-Z-Boy site I was in recently, where you had to choose a product type (Recliner), then choose a chair (from over 80), then from the covers available (over 800 of them) choose a type, colour and pattern, each in separate screens. In other words, they used smaller amounts of choices to focus in on what the customer liked. It can be a bit frustrating if you need to back out and drill down again, but it works quickly at each stage.

Rob

[flashy275]

Will load site live this week & see. The delay is not so visible, it's the hover that's delayed, this is what I will time.

Still would like to know how the loading image is created, if it is essential later this week I will go on PHP sites & work it out.

Steve

[kuroi]

The loading images are normally displayed when content is being loaded via AJAX. So before going off to the server, the loading gif is displayed, and once the requested content has been received the gif is removed and replaced with the content.

This is a little different to what you're describing. But here's another possible approach ...

Are you running the preloader javascript from within your site's head tag. If so, you could load the immediately displayed images normally as part of the page content, but run the preloader for the hover images only just before your closing </body> tag. This would allow the page to load with the images your visitors need to get started, and the hover images to load while your visitors are discovering the features that require them.

Alternatively you could include a big loading gif, "absolutely positioned" using css early in your body tag and add javascript to remove it at the end of your preloader.

Note that none of this has anything to do with PHP, which is executed on your server. Your solution will need to be javascript-based, as only your visitor's browser knows the state of the loading and therefore when it's appropriate to remove the loading gif.

[flashy275]

Brilliant Kuroi!

I now know were to start, I will have a go down these routes and advise.

Big thanks