0

所以这里有一些背景。

我有一个移动网站，我在其中设置了一个覆盖整个页面内容的 iOS 微调器和白屏。在 document.ready 上，微调器和屏幕立即显示并显示，直到页面内容完全加载——此时屏幕和微调器消失，显示页面内容。

这一切都很好。但是，如果页面加载得足够快，我想稍微完善一下脚本并且不显示覆盖和微调器。其中许多页面将非常轻量级（如果用户之前访问过它们 - 之前已缓存）并且让微调器和叠加层在瞬间闪烁一秒钟或更短时间是无用的，并且可能会造成混乱。但是，当页面加载时间超过几秒钟时，拥有此功能非常有价值。

我试图找到一种仅在页面加载时间超过一秒时才执行脚本的方法。起初我以为我可以简单地告诉脚本等待一秒钟才能执行，但这样做时，当 DOM 构建页面的 html 结构时，用户会看到一闪而过的内容——如果所有资产都没有，那么它就会被隐藏t 在一秒钟内完成。

显然，这使用户感到困惑并且是不可接受的。

另一种看待这个问题的方法是，“如果页面被缓存/加载很快 - 不要显示微调器和覆盖。否则，继续显示它。”

有没有办法做到这一点？

这是我目前正在使用的代码（这是使用 jquery 和 spin.js）：

// invoke spin.js
$(document).ready(function() {

    var $overlayScreen = $('<div id="pageLoader" class="overlay pageLoad"></div>');
    $('body').append($overlayScreen);

    var opts = {
      lines: 13, // The number of lines to draw
      length: 7, // The length of each line
      width: 4, // The line thickness
      radius: 10, // The radius of the inner circle
      rotate: 0, // The rotation offset
      color: '#000', // #rgb or #rrggbb
      speed: 1, // Rounds per second
      trail: 60, // Afterglow percentage
      shadow: false, // Whether to render a shadow
      hwaccel: true, // Whether to use hardware acceleration
      className: 'spinner', // The CSS class to assign to the spinner
      zIndex: 2e9, // The z-index (defaults to 2000000000)
      top: 'auto', // Top position relative to parent in px
      left: 'auto' // Left position relative to parent in px
    };
    var target = document.getElementById('pageLoader');
    var spinner = new Spinner(opts).spin(target);
});

// check to see if the page has loaded yet.  If it has, hide the loader div
$(window).load(function() {
    $('#pageLoader').addClass('loadComplete');
});
4

1 回答 1

1

问题是，在页面加载之前，您无法检查页面加载需要多长时间。这样做的唯一方法是延迟显示加载微调器大约 1 到 1.5 秒，如果页面在显示微调器之前完成加载，则清除该延迟。这真的是我认为可以做到的唯一方法。

$(document).ready(function() {
    var overlayTimer = setTimeout(function() { 
        $('<div id="pageLoader" class="overlay pageLoad"></div>').appendTo('body');
    }, 1500);

    // other code for the spinner here

    $(window).load(function() {
        clearTimeout(overlayTimer);
        $('#pageLoader').addClass('loadComplete');
    });
});

这是我能想到的唯一适合您需要的情况。不是最好的解决方案，因为如果需要显示微调器，在显示微调器之前仍然会有 1.5 秒的延迟。

于 2012-08-08T23:22:04.263 回答