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由窗口上的load事件触发，在所有内容都被加载之前不会被触发。

非常好的效果。

怎么做这个图像正在加载？

1 个答案: