Show loading image in a <div> until the content or image is loaded.

Hey all,
Is there a simple script you could help me with to display a loading image in a <div> until the content or image is loaded?

Thanks!
wglenn01Asked:
Who is Participating?
 
gops1Connect With a Mentor Commented:
Check this out:

<html>
      <head>
            <title>Script Demo</title>
            <script language="JavaScript">
                  function changeStatus(){
                        document.getElementById('imgStatus').innerHTML="Image Loaded Successfully!!!"
                  }
            </script>
      </head>
<body>
      <img src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif" onload='changeStatus();'>
      <div id="imgStatus">Loading Image</div>
</body>
</html>
0
 
aescntConnect With a Mentor Commented:
By the way, a cute fix to do this is if you have an image in a div like so:

<div><img src="image.jpg"></div>

You can set the div's background-image (with CSS) to a loading bar. That way, when the image isn't fully loaded, the loading bar will show up, but once the image is loaded it will cover the bar. :)
0
 
badalpatelConnect With a Mentor Commented:
lets try this modified code of gops1
Check this out:

<html>
     <head>
          <title>Script Demo</title>
          <script language="JavaScript">
               function changeStatus(){
                    document.getElementById('imgStatus').visibility='hidden';
               }
          </script>
     </head>
<body>
     <img src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif" onload='changeStatus();'>
     <div id="imgStatus">Loading Image</div>
</body>
</html>
 
 
 
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.