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();
  }
});

内部评论是关于它如何运作的粗略解释

jQuery加载屏幕，观看时间最短

2 个答案: