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

Answer 2

<script  type='text/javascript'>

$(document).ready(function(){

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

});

</script>

将它放在html文档的底部（关闭body标签之前）。显然，网址应该是您图片的网址。而且你必须在文档的头部导入jquery库。

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

- 或者您可以下载jquery并将其放在您的服务器上）

此外，如果您不想将背景图像附加到正文，只需改为使用div id（如（'#content'））

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

2 个答案: