Question

所以这里有一些背景知识。

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

一切正常。但是，我想稍微改进一下脚本，而不是显示叠加层和放大器。如果页面加载足够快，则使用微调器。这些页面中的许多页面将非常轻量级（如果用户之前已经访问过它们 - 之前已经缓存过）并且具有旋转器和放大器。暂时覆盖闪烁一秒或更短时间是没用的，可能会造成混乱。但是，当页面加载时间超过几秒钟时，这具有很大的价值。

我正在尝试找到一种方法来执行脚本，只有当页面花费的时间超过一秒钟才能加载。起初我以为我可以简单地告诉脚本等待一秒钟来执行，但是在这样做时，用户看到内容的闪存，因为DOM构建了页面的html结构 - 如果所有资产都不是，那么它将被隐藏在一秒钟内完成。

显然这对用户来说很困惑，是不可接受的。

另一种看待这种情况的方法是，“如果页面被缓存/快速加载 - 请不要显示微调器和叠加。否则，请继续显示它。”

有没有办法实现这个目标？

这是我正在使用的代码（这是使用jquery＆amp; 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');
});

Answer 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秒的延迟。

如果页面加载足够快，是否可以不触发脚本？

1 个答案: