preloader image

[sircutbreaker]

how do you display a loading gif for images that arent loaded yet?

http:/maximlrg.com/uomo

you will see why i need to do this...

thanks..

Jeff

[Dimo]

Hi Jeff,

I would recommend a simple pure CSS solution in your case :

1) Since your images are all the same size, set this size with CSS. In this way the page content will stop jumping during page load

#dlPics table table div
{
     width: 175px;
     height: 240px;
}


2) Set a "loading" background image to the divs, which wrap the images

#dlPics table table div
{
     background: url(...) center center no-repeat;
}


You can set a CSS class to table#dllPics and use it instead of the client ID.


I recommend the above solution because it is a lot lighter and easy to implement than any other possible ways to achieve what you want, which would require more coding and a lot of javascript executing on the page.

By the way, you surely do not need a separate table for each image - one table to wrap all images is enough. If you decide to optimize your HTML output, the above selectors will have to be modified accordingly.


Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.