Image loading indicator 1

[ChrisRChamberlain]

Hi all

The following css code, courtesy of BillyRayPreachersSon, displays an animated .gif when hovering over a thumbnailed image.

.vvvvv {
    margin:0px 5px;
    float:left;
    background: url(../thumbnailed/vvvvv.png) no-repeat;
    width: 128px;
    height: 96px;
    display: block;
}
.vvvvv:hover {
    margin:0px 5px 5px;
    background: url(../animated/vvvvv.gif) no-repeat;
    width: 450px;
    height: 360px;
}

There are 30+ thumbnailed images on a webpage and preloading the animated .gifs takes too long to complete.

There is a delay whilst hovering before the animated .gif shows, so how can one indicate to the user that another image is being loaded?

TIA

FAQ184-2483​

Chris
PDFcommander.com
motrac.co.uk

 

[Vragabond]

I would suggest you use sprites. That is, one large(er) image that has either both static and animated image or even all 30+ images in one file that loads at the beginning. Then you just use background position to move around this file, showing the correct part. This works seamlessly for rollovers, is less demanding on your server and will cache all the images immediately. For more read here:

http://www.alistapart.com/articles/sprites/

http://wellstyled.com/css-nopreload-rollovers.html

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

 

[ChrisRChamberlain]

Vragabond

Thanks for your reply, suggestions and links.

Further explanation required - a user builds an index page for a motor trader's website through a wizard based application running on a LAN.

A thumbnail image is selected from a motor trader's gallery of images of his own stock/inventory.

Next the motor trader selects a number of images of the same vehicle and an animated .gif is built.

Once the wizard completes building the complete vehicle specifications, the new index page plus all relevant images/files etc are uploaded to the website, overwriting the existing files.

By utilising 'hover', a prospective purchaser can view the ins and outs of a vehicle without needing to click or otherwise select the vehicle.

The current downside is the small delay whilst the animated .gif loads and I wondered if there was an intermediary image that might be loaded, indicating the larger image was being loaded?

I can see possible problems implementing sprites but would be pleased to be wrong.

FAQ184-2483​

Chris
PDFcommander.com
motrac.co.uk

 

[traingamer]

Essentially there is no way to do that with css. You may want to prominently display a generic "there may be a delay while the images load" message.

Or you could craft a JavaScript solution.

Alternatively, you could try to optimize the size of the animated gifs - I'm guessing that they are rather large.

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

 

[ChrisRChamberlain]

Alternatively, you could try to optimize the size of the animated gifs - I'm guessing that they are rather large.

The original images are programatically reduced form the original using GDIplus, a thumbnail being circa 35 KB and an animated .gif between 300 and 400 KB, depending on the number of images selected.


The animated .gif uses 450px x 360px images and builds to the same size, so I'm not sure if there is much scope there for optimisation?

FAQ184-2483​

Chris
PDFcommander.com
motrac.co.uk

 

[traingamer]

That sounds like a relatively reasonable size, so my guess of optimization appears to be incorrect.

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

 

[ChrisRChamberlain]

traingamer

Thanks for your reply.

An alternative might be to call another webpage, size 450px x 360px, with perhaps a background image indicating the animated gif was loading and then the animated .gif would appear on top of the background image.

Any thoughts on how to impliment that or any better alternatives?

TIA

FAQ184-2483​

Chris
PDFcommander.com
motrac.co.uk

 

[ChrisHunt]

If you're determined to avoid Javascript, I'd take a look at the techniques in

http://www.cssplay.co.uk

. I didn't find one that does exactly what you want, but I didn't look at all of them.

If Javascript's OK, try using one of the many "lightbox"-style scripts out there to do it, rather than brewing your own. This might be a good place to start:

http://www.fortysomething.ca/mt/etc/archives/005400.php

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[ChrisRChamberlain]

Chris

Thanks for your reply and links.

If Firefox were ever to allow one to create a non-resizable window, the css alternative you suggested would be fine.

As it is am going to try a modified version of Lightbox image viewer 2.03a

FAQ184-2483​

Chris
PDFcommander.com
motrac.co.uk