How to show a loading image or text before loading 3 background images of 3 DIV

Discussion in 'HTML & Website Design' started by nandanamnidheesh, May 7, 2012.

  1. #1
    i like to show a loading image before 3 images load as div bg, this 3 div images are big in size and take upto 1 min in slower connection, these 3 images form a parallex effect (png file) so i want to show a loading image before the 3 images loaded completly. how can i do that. am not good at javascript.
     
    nandanamnidheesh, May 7, 2012 IP
  2. IDocXD

    IDocXD Member

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #2
    I would recommend using a jquery/javascript image pre-loader seeing that it is very easy and will take care of any image used in your project.

    But a possible way without using java is maybe to using a loading image centered as the divs background and the images you are trying to load in a div after.
    This may conflict if you are trying to have the loaded images as the background of the div though.
     
    IDocXD, May 8, 2012 IP
  3. nandanamnidheesh

    nandanamnidheesh Active Member

    Messages:
    376
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    55
    #3
    Yes currently the 3 divs images as there background image so the 2nd option is not possible can you please suggest me any easy jquery pre-loader script.
     
    nandanamnidheesh, May 10, 2012 IP
  4. IDocXD

    IDocXD Member

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #4
    Here is a very nice and simple preloader.
    If you would like to learn how to create it, there is a very in depth tutorial along with it.
    But if you wish to just implement it into your project, i would suggest that you just download the source, and plug it into your project to make things a lot more simpler.

    You can also find new loading images at: http://ajaxload.info/

    http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-awesome-image-preloader/
    Code (markup):
     
    IDocXD, May 10, 2012 IP