具有最短查看时间的 jQuery 加载屏幕

Question

所以我有这个加载屏幕，它在页面加载时显示信息，但由于互联网速度更快，这可以在一瞬间显示。我想添加一个最短显示时间！这是我当前的代码

jQuery(window).load(function() {
    jQuery('.pageLoad').animate({
        opacity: 0
    }, 800, function() {
        jQuery('.pageLoad').css({
            display: 'none'
        });
    });
});

我该怎么做？

Answer 1

您可以将淡出方法放在一个函数中，并在从$(document).ready() xx 秒后调用它：

var timeoutID;

jQuery(document).ready(function() {
    // start hiding the message after 2 seconds
    timeoutID = window.setTimeout(hideMessage, 2000);
});

function hideMessage() {
    jQuery('.pageLoad').animate({
        opacity: 0
    }, 800, function() {
        jQuery('.pageLoad').css({
            display: 'none'
        });
    });
}

Answer 2

正如@Rayf 所说，如果应该读取那条信息，无论页面加载速度如何，都应该像这样添加一些延迟：

// time to read the message...adjust it to the time you feel is right
var msgDisplayTime = 5000,
    interval = 0,
    loaded = false,
    delayed = false,
    fadeLoader = function () {
      jQuery('.pageLoad').animate({opacity: 0}, 800, function () {
          jQuery('.pageLoad').css({display: 'none'});
      });
    };

//timeout for your desired delay time
//it will ask if it is already loaded after delay ends
//triggering the fading of loading overlay
timeout = setTimeout(function(){
  delayed = true;
  if(loaded){
    fadeLoader();
  }
},msgDisplayTime);


//when loaded, it will wait until delay happened
//if not, it will delegate the execution to the timeout
// so at the end, it will be triggered after the delay or
//loading time, in case it longer than desired delay
jQuery(window).load(function(){
  loaded = true;
  if(delayed){
    fadeLoader();
  }
});

在 cmets 里面是关于它如何工作的大致解释