Question

我想制作一个带有加载栏的完全白色背景，或者是完整加载了util视频/图像/脚本的东西。加载后我想把animate.css的FadeIn效果放到所有的body elemnts中。

我想要一个像this

这样的加载页面脚本

Answer 1

最简单的算法。假设你有这个HTML。

<body>
    <div class="preloader">
        <span></span>
    </div>
    <div class="wrapper initial">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</body>

1）将这种CSS样式放在样式表中

.wrapper {
    text-align:center;
    padding:50px;
}

.initial {
    display:none;
}

.preloader {
    position:absolute;
    width:100%;
    height:100%;
}

.preloader span {
    display:block;
    margin : 70px auto;
    width : 100px;
    height : 100px;
    background : url('http://www.firstimpressionsdentistry.com/images/animated_preloader.gif') 50% 50% no-repeat;
}

2）添加包含此类内容的JS文件，为简单起见，我将使用JQuery

$(document).ready(function() {

    //display(); // uncomment this if you want to display immediately

    setTimeout(function() {
        display();  // example with custom delay
    }, 5000)
})

function display() {

    var wrapper = $('.initial');
    var loader = $('.preloader');

    loader.fadeOut(2000);

    wrapper.fadeIn(4000, function() {
        wrapper.removeClass('initial');
    });
}

JS效果util页面正在加载

1 个答案: