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

Question

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

老实说，我对 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');
    });
   });