Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Please HELP! HTML Loading image for HTML Code

    Hi All thats my first post on this forum.

    I really want your help because I am confusing about this. I have a problem and I'll explain it now in short words.

    I have a XHTML Code containg an image like this one here :

    Code:
    <img src="http://farm3.static.flickr.com/2621/4053328414_e08f43660a_o.png"/>
    I know this photo is small image and will load Fast but its only an example.

    The problem is I don't know how to make a Loading GIF image appears before it like an (Ajax loader) just for telling the user to wait until the photo loads and appear to him Like this one:



    So Please if any one know the HTML Code for this loader please type it for me and show me how to put my (HTML Code) and the (Loading .gif) link.

    it will be a Great appreciate.
    Thank you very much,

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Possibly something like this:
    Code:
    <!doctype html>
    <html lang="en">
      <head>
        <title></title>
        <style type="text/css">
    .image-container {
      background: url(loading.gif) center center no-repeat;
    }
    img {
      display: block;
    }
        </style>
      </head>
      <body>
        <div class="image-container">
          <img src="http://farm3.static.flickr.com/2621/4053328414_e08f43660a_o.png"/>
        </div>
      </body>
    </html>
    It seems unnecessary to me, though: users already know that they have to wait for images to load. They've been doing so since the beginning of the internet.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •