在设定的时间后移除加载微调器

Question

我正在使用以下 javascript 加载和删除网页的微调器。

$(window).load(function() {
  $(".sk-rotating-plane").fadeOut("slow");;
  setTimeout(function(){
    $('body').addClass('loaded');
  }, 10);
});

我想做的是改变它，如果页面加载时间超过 5 秒，然后删除微调器（淡出），但我仍然希望它在加载需要正常时间时正常显示（加载功能）。

这可以用 javascript 中的 if 语句来完成吗？

Answer 1

试试这个：

var executed = false;
var loaded = function () {
    if (!executed) {
        $(".sk-rotating-plane").fadeOut("slow");
        setTimeout(function () {
            $('body').addClass('loaded');
        }, 10);
        executed = true;
    }
};
$(window).on('load', loaded);
setTimeout(loaded, 5000);

Answer 2

关闭两次也没关系

setTimeout(function(){
    $(".sk-rotating-plane").fadeOut("slow");
}, 5000);

$(window).on('load', function(){
    $(".sk-rotating-plane").fadeOut("slow");
    $('body').addClass('loaded');
    // more stuff
});

Answer 3

您可以通过使用setinterval 方法定期查找，加载时清除计时器来实现。

 $(window).load(function() {
    clearInterval(stimer);
    $('body').addClass('loaded');
    });

现在启动一个计时器来计算加载时间

var count=1
var stimer=setInterval(function(){
   if(count==5)
    {
     $(".sk-rotating-plane").fadeOut("slow"); // taking more time
    }
  count++;
  }, 1000);

在设定的时间后移除加载微调器

Remove loading spinner after a set time

javascript

jquery

loading