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

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

这一切工作正常。不过，如果页面加载速度够快，我想稍微修改一下脚本并不显示覆盖范围&微调框。这些页面中的许多页面将非常轻量级（如果用户之前访问过它们 - 之前缓存过）并且在瞬间叠加闪烁一秒钟或更短时间的闪烁是无用的，并且可能会造成混淆。但是，当页面加载时间超过几秒钟时，就有很大的价值。

我试图找到一种方法来执行脚本只有当页面花费的时间比说一秒加载。起初，我认为我可以简单地告诉脚本等待一秒钟执行，但这样做时，用户会看到内容的闪光，因为DOM会构建页面的html结构 - 如果所有资产都不是“在一秒钟内完成。

显然这对用户来说是令人困惑的，并且是不可接受的。

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

有什么办法可以做到这一点？

这里是我目前使用的代码（这是使使用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'); 
});

来源

2012-08-08 David Vasquez

除了下面列出的选项之外，我唯一能想到的其他选项是检查页面是否已被缓存。一种哈克，但可能会为你工作。看到这个：http://stackoverflow.com/questions/260043/how-can-i-use-javascript-to-detect-if-i-am-on-a-cached-page – 2012-08-08 23:31:31

我也在类似的思路。我喜欢这个帖子所暗示的方式。我一直在考虑放弃一个临时cookie，如果用户返回，检查是否存在该cookie - 如果存在，用户之前在那里，并且加载器不应该加载;否则放弃cookie并显示加载器。我的一些同事建议，在所有情况下这都不起作用，因为我们网站上的相当频繁的页面会返回新内容。只是因为用户以前访问过特定的页面并不意味着没有新的数据要加载......所以杀死了这个想法。 – 2012-08-14 22:55:20

的问题是，有没有办法让你签的页面需要多久在页面加载之前加载。这样做的唯一方法是延迟显示加载微调器大约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-08 23:22:04

感谢大罗斯。我得出了同样的结论，这很不幸，因为这并不一定能帮助我解决这个特殊情况。不过，我感谢您的反馈和洞察力！ – 2012-08-14 22:45:56

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

回答

相关问题