Wait for image to be fully loaded before displayed on page?

Question

I am designing a website for a client and am trying to figure out how to tell the current browser viewing the page to wait until the background image is fully loaded before it is displayed on the page. It is a large background image (bytes-wise) and would like it to load once loaded. I also want to do the exact same with the logo, but am stumped.

To be quite honest with all of you, I know very little JavaScript and jQuery, which is why I ask, please someone help me it would make the page a lot more attractive. The reason why I stated that above is because I know this may only be done in JavaScript.

I'm thinking a div that has onload="divID.setVisible(true);" might do it. — , May 17 '11 at 00:14
@bdares Where would I play that set up code? between the tag(s)? And also the background image is called via the body. Thank you. — Aaron Brewer, May 17 '11 at 00:20

Z. Zlatev · Accepted Answer · 2011-05-17T00:25:59.647

5

What comes to mind without actually used or tested it is wrapping the image. I'll use jQuery for the sample

<div class="loading"><img/></div>

CSS could be

.loading { display: inline-block; }
.ie6 .loading, .ie7 .loading { display: inline; } /* these could be set by http://www.modernizr.com/ */
.loading img {
     visibility: hidden;
     background: url('path/to/loading.gif') center center no-repeat transparent;
     vertical-align: bottom; /* or display: block; to kill the inline white space */
}

JavaScript (jQuery)

  $(function(){
    $('.loading img').load(function(){
         $(this).css('visibility','visible');
    });
   });

edited May 17 '11 at 00:25

answered May 17 '11 at 00:20

Z. Zlatev

4,757
1
33
37

1

Zlat I appreciate the effort but is the amount of CSS provided necessary? – Aaron Brewer May 17 '11 at 00:35
Well, i suppose handling it all in JS is more no-js friendly. Still tuned for other solutions – Z. Zlatev May 17 '11 at 00:41

score 2 · Answer 2 · answered May 17 '11 at 01:58

<script  type='text/javascript'>

$(document).ready(function(){

$('body').css('backgroundImage','url(http://yoursite/yourimage.jpg)');

});

</script>

Put it in the bottom of your html document (before closing body tag). Obviously, url should be your image's url. And you have to import jquery library in the head of your document.

<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script></pre>

- or you can download jquery and put it on your server)

Also if you don't want to attach background image to body just put your div id instead (like ('#content'))

Wait for image to be fully loaded before displayed on page?

2 Answers2

Linked