javascript - 加载这个图片怎么办？

Question

我刚刚浏览了这个美丽的网站。谁能告诉我那个设计师是如何展示“魔法正在加载”的东西:

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

网站完全加载后，图像就会消失。

Answer 1

他正在使用 JavaScript。

查看文件http://danielhellier.com/showcase/danielhellier/js/jquery.bits.js

在第一行中，一旦网站加载，他就会淡出加载 div:

$(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> 

加载 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-index 很高，可以将其放在所有内容之上，并且高度和宽度均为 100%，可以使其占据整个窗口并具有不透明的背景。

他还说<div>在 HTML 的其余部分之前。因此它将首先加载，然后由窗口上的加载事件触发删除它的 JavaScript，直到所有内容都加载完毕后才会触发。

非常好的效果。