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

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

将其放在 HTML 文档的底部（在关闭

body

标签之前）。显然，该 URL 应该是您的图像的 URL。

<script type='text/javascript'>
  $(document).ready(function() {
    $('body').css('backgroundImage', 'url(http://yoursite/yourimage.jpg)');
  });
</script>

你必须在文档的头部导入 jQuery 库（或者你可以下载 jQuery 并将其放在你的服务器上）。

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

此外，如果您不想将背景图片附加到正文上，只需将您的

div

的

id

代替即可（如

('#content')

）。