任何人都可以告訴我怎麼做這個圖像加載？

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由窗口上的加載事件觸發，直到加載完所有內容後纔會觸發它。

一個非常好的效果。