任何人都可以告诉我怎么做这个图像加载？

Question

我刚刚通过这个美丽的网站。谁能告诉我怎么说设计师已经显示出“神奇的是装载”的事情： -

http://danielhellier.com/showcase/danielhellier/

的网站complelely加载的图像只想尽快消失。

感谢提前:)

Answer 1

他正在使用JavaScript。

看在他淡出装载DIV的第一行的文件http://danielhellier.com/showcase/danielhellier/js/jquery.bits.js

一旦网站加载：

$(window).load(function() { 
    $('#loading').fadeOut('slow'); 
}); 

加载DIV：

<div id="loading"> 
    <div align="center"> 
     <p>The magic is loading</p> 
     <img src="img/loader.gif" alt="Loader" /> 
    </div> 
</div> 

的CSS的加载格：

#loading { 
    background: none repeat scroll 0 0 #1E1E1E; 
    color: #FFFFFF; 
    cursor: wait; 
    height: 100%; 
    overflow: hidden; 
    position: absolute; 
    width: 100%; 
    z-index: 100; 
} 

注意z-索引是如何将它放在所有东西之上，并且高度和宽度都是100％，以使其占用整个窗口的不透明背景。

另外，他把<div>放在HTML的其余部分之前。因此它将首先被加载，并且要移除它的JavaScript由窗口上的加载事件触发，直到加载完所有内容后才会触发它。

一个非常好的效果。