preloader image

2 posts, 1 answers
  1. sircutbreaker
    sircutbreaker avatar
    111 posts
    Member since:
    Oct 2007

    Posted 28 Sep 2008 Link to this post

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


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


  2. Answer
    Dimo avatar
    8404 posts

    Posted 29 Sep 2008 Link to this post

    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,
    the Telerik team

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