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

Just wondering if anyone else had overcome this?

I've created several new pages, like the "about_us.php" page, 1 page in particular links to several other new pages, the page depends on what the user selects, non of the new pages offer products of course just information.

The problem I have is when the user selects an option which will load the next page, the page loads quickly however as I'm using java to pre load images the page appears static for several seconds (dependent of course on connection speed) could be a while, but I would like them to see the hover effect from the pre loaded images instantly. Just to clarify, the images pre loaded are for the hover effect & theres lots!

My answer would be a loading image whilst the java loads up the hover images but not sure how to start, anyone overcome this or using a loading image whilst loading pages?

No one else had this problem them? Just to clarify, if a page takes some time to load, is it possible to display a graphic loading image whilst the page is loading. The admin login area does this already.

Thanks

I think, before you try to fix the page load time with that approach, you need to work out why it's taking so long to load the page. You say there are lots of images to load -- how many? And what is the file size of each of them (on average)?

On a non-Zen Cart site that I manage, I load a page containing 82 thumnails, with an average size of about 80 KB. There's over 6.8 MB loading on that page, counting a large amount of text, and it loads in a "fresh" (emptied cache) browser in under 2 seconds. So how does your page compare to that? What's the total of the file sizes of all the images you're loading?

Can you tell me the URL of the page you're having a problem with? Maybe it's your own access to the web which is slow. I could check the page load speed and let you know what it is at my end.

Rob

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.

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

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

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

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

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.

Brilliant Kuroi!

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

Big thanks