This is a migrated thread and some comments may be shown as answers.

preloader image

1 Answer 82 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
sircutbreaker
Top achievements
Rank 1
sircutbreaker asked on 28 Sep 2008, 05:03 AM
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

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 29 Sep 2008, 06:44 AM
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.
Tags
Ajax
Asked by
sircutbreaker
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or