javascript - 没有 JQuery 的窗口加载(和淡出)

Question

我目前在一个较小的网站上工作，其中无法使用 JQuery。 我想要的是等到整个页面(包括图像)加载完毕(在页面加载时显示 CSS 加载器)然后淡出 CSS 加载器。

我有在 JQuery 中工作的代码:

(function($) {
    $(window).load(function() {
        $('.loader').fadeOut(1000);
    });
});

如果没有 JQuery，我怎么能实现这一点，CSS 加载器已经实现并可以工作，不需要在那里做任何事情(我从来没有在没有 JQuery 的情况下工作过不幸的是我的元素)？

Answer 1

在这里，看一下这段代码。 => DEMO

我已经对其进行了测试并且可以正常工作。此代码也适用于旧版浏览器(例如 IE8 等)。

1. 首先，我们将一个事件监听器附加到我们的元素 (window)。

2. 然后我们定义函数(function fadeOut)，它将为opacity 属性设置动画。

3. 您必须将选项/参数传递给我们的fadeOut 函数。

在 first (element) 参数下，您必须指定要设置动画的 element。 第二个 (startLevel) 参数是动画应该开始的级别。 第三个 (endLevel) 参数是动画应该停止的级别。 forth (duration) 参数是我们动画的持续时间。最后，fifth (callback) 选项是一个回调，这意味着当我们的动画完成时，您将收到通知并且还可以传递一些额外的代码。

Javascript

function attach(element,listener,ev,tf){

if(element.attachEvent) {

    element.attachEvent("on"+listener,ev);

}else{

    element.addEventListener(listener,ev,tf);

}

}

function fadeOut(element,startLevel,endLevel,duration,callback){

var fOInt;

    op = startLevel;

fOInt = setInterval(function() {

    if(op<=endLevel){

    element.style.opacity = endLevel;
    element.style.filter = "alpha(opacity = " + endLevel + ")";

    clearInterval(fOInt);

        if(typeof callback == 'function') callback(true);

    }else{

    op -= 0.1;

    element.style.opacity = op;
    element.style.filter = "alpha(opacity = " + op*100 + ")";

    }

    },duration);

}

attach(window,'load',function(){

    fadeOut(document.getElementById('loader'),1,0,50,function(cb){

    alert('The loader has faded out!')

    });

},false);

HTML

<div class='loader' id='loader'></div>

CSS

.loader{
    width:200px;
    height:200px;
    border:5px solid red;
    background-color:brown;
    opacity:1;
    filter:alpha(opacity=100);    
}