Question

我有加载动画，当网页在后台加载时显示。加载完成后，它会消失。

我想要的...... 1.动画至少出现1秒钟。 2.一旦最小1秒钟到期，动画将在页面加载后自然删除。 3.为了避免出现故障的可能性（以及观看无休止的动画循环），如果加载时间超过5秒，我希望动画超时。

这是我到目前为止所拥有的......

$(window).load(function()
{ 
$('#followingBallsG').hide(); 
$('#backgroundcolor').hide(); 
});

非常感谢您提供的任何帮助。感谢。

Answer 1

没有内置的jQuery功能。您需要为此写出逻辑。这是一个简单的实现，没有竞争条件。

(function(){
    var didDone = false;
    function done() {
        //Prevent multiple done calls.
        if(!didDone)
        {
            didDone = true;
            //Loading completion functionality here.
            $('#followingBallsG').hide();
            $('#backgroundcolor').hide();
        }
    }
    //Variables to keep track of state.
    var loaded = false;
    var minDone = false;
    //The minimum timeout.
    setTimeout(function(){
        mindone = true;
        //If loaded, fire the done callback.
        if(loaded)
        {
            done();
        }
    }, 1000);
    //The maximum timeout.
    setTimeout(function(){
        //Max timeout fire done.
        done();
    }, 5000);
    //Bind the load listener.
    $(window).load(function(){
        loaded = true;
        //If minimum timeout done, fire the done callback.
        if(minDone)
        {
            done();
        }
    });
})();

我已将其包装在一个立即调用的函数表达式中，并假设$(window).load是您正在侦听的事件。如果这不是预期的效果，应该很容易使其适应另一个事件或在另一个时间运行。

设置最短时间和超时

1 个答案: