等待图像完全加载后再显示在页面上？ [英] Wait for image to be fully loaded before displayed on page?

问题描述

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

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.

老实说，我知道很少有JavaScript和jQuery，这是为什么我问，请有人帮助我，这将使页面更具吸引力。我上面说的原因是因为我知道这可能只能在JavaScript中完成。

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.

推荐答案

实际上没有想到什么使用或测试它是包装图像。我将使用jQuery作为样本

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可能是

.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）

JavaScript (jQuery)

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

这篇关于等待图像完全加载后再显示在页面上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！