等待图像完全加载后再显示在页面上？

Question

我正在为客户设计一个网站,并试图弄清楚如何告诉当前浏览器查看页面等到背景图像完全加载后再显示在页面上.它是一个大的背景图像(按字节顺序),并希望它加载后加载.我也想对徽标做同样的事情,但我很难过.

老实说,我很了解JavaScript和jQuery,这就是我要问的原因,请有人帮助我,这会让页面更具吸引力.我上面说的原因是因为我知道这可能只能在JavaScript中完成.

Answer 1

没有实际使用或测试它的想法是包装图像.我将使用jQuery作为示例

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

CSS可能是

.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');
    });
   });