在文档准备好之前可能采取的行动
问题
我写了一个脚本来通知用户页面正在缓慢加载(比如说，这是因为互联网连接缓慢)。脚本放在<head></head>中的第一位，非常简单：
var GLOBAL_TIMEOUT = setInterval(function () {
alert("The Internet connection is slow. Please continue waiting.");
}, 30000);
//clear that interval somewhere else when document is ready
$(function () {
clearInterval(GLOBAL_TIMEOUT);
});问题
在当前示例中，只需通知信息。有没有其他可能的方式通知用户页面加载缓慢(特别是当头中的某个js或css文件非常大且需要一些时间加载时)？我已经尝试过操纵DOM (在我看来，在文档准备好之前，这是不对的)，document.body导致了null。
附加内容
设置间隔的解决方案来自here。对于如何做到这一点，任何其他想法都会受到极大的赞赏。
回答 5
Stack Overflow用户
发布于 2013-09-06 13:05:19
嗯，经过几个小时的脑损伤，我终于解决了。这更多的是更好的用户体验，而不是技术创新，但符合我的需要。
<script></script>仍然位于<head></head>的顶部，它每30秒询问用户是否想停留在页面上等待，直到加载。如果用户拒绝，窗口将被关闭，否则加载将继续。脚本如下所示：
(function () {
var SLOW_CONNECTION = setInterval(function () {
if (!confirm("The Internet connection speed is low. Do you want to continue waiting?")) {
var win = window.open("", "_self");
win.close();
}
}, 30000);
window.addEventListener("load", function () {
clearInterval(SLOW_CONNECTION);
});
})();Stack Overflow用户
发布于 2013-09-06 08:31:12
如果是我，我可能会尝试这样的方法：
<style>
.notification {
font-family: sans-serif;
font-size: 11pt;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 30px;
text-align: center;
background: #eee;
-webkit-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
-o-opacity: 0;
opacity: 0;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.notification.reveal {
-webkit-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
-o-opacity: 1;
opacity: 1;
}
</style>在<body>之后使用下面的标记
<div id="note-wrap"></div>和下面的标记就在</body>之前
<script>
(function(){
var gui = {}, tos = {};
gui.wrap = document.getElementById('note-wrap');
gui.note = document.createElement('div');
gui.note.className = 'notification';
gui.note.innerHTML =
'The page is taking a long time to download. ' +
'Please continue waiting.'
;
/// run the setInterval at 30s
tos.append = setInterval(function(){
/// add the note element
gui.wrap.appendChild(gui.note);
/// trigger the css transitions
tos.reveal = setTimeout(function(){
gui.note.className = 'notification reveal'; delete tos.reveal;
}, 100);
tos.conceal = setTimeout(function(){
gui.note.className = 'notification'; delete tos.concel;
}, 5000);
}, 30000);
/// on dom ready clear timeouts
jQuery(function(){
clearInterval(tos.append);
if ( tos.conceal && tos.reveal ) {
clearTimeout(tos.reveal);
clearTimeout(tos.conceal);
}
});
})();
</script>通过将此脚本放置在close body标记之前，您可以访问以前分析过的所有DOM元素，您不需要等待DOMReady。
虽然，为了触发这一点，您需要一个非常大的页面，因为它必须是纯粹的dom，从而减缓页面的速度。
有没有其他可能的方法通知用户页面加载速度慢(，特别是当头中的js或css文件非常大且加载需要一些时间时)？
以上这些让我相信，您最好使用jQuery(window).load而不是jQuery(document).ready。因此，您可以将上面的后半部分替换为：
/// on everything ready clear timeouts
jQuery(window).load(function(){
clearInterval(tos.append);
if ( tos.conceal && tos.reveal ) {
clearTimeout(tos.reveal);
clearTimeout(tos.conceal);
}
});这只会触发一旦所有的下载，即图像，脚本，风格等。
无jQuery
这也很容易用跨浏览器的方式实现--比DOMReady更容易--而无需使用jQuery。我们只需要确保不删除任何预先存在的onload侦听器。
window.onload = (function(prev, ours){
return function(e){
( ours && ours.call && ours.call( window, e ) );
( prev && prev.call && prev.call( window, e ) );
};
})(window.onload, function(){
clearInterval(tos.append);
if ( tos.conceal && tos.reveal ) {
clearTimeout(tos.reveal);
clearTimeout(tos.conceal);
}
});但是，如果您想要一种更现代的解决方案，那么您只需要担心您可以使用的顶级浏览器：
window.addEventListener('load', function(e){
clearInterval(tos.append);
if ( tos.conceal && tos.reveal ) {
clearTimeout(tos.reveal);
clearTimeout(tos.conceal);
}
});..。加上一点纵横交错的色彩，也许是这样的：
var onload = function(){
clearInterval(tos.append);
if ( tos.conceal && tos.reveal ) {
clearTimeout(tos.reveal);
clearTimeout(tos.conceal);
}
};
if ( window.attachEvent ) {
window.attachEvent('onload', onload); // note the 'on' prefixed
}
else if ( window.addEventListener ) {
window.addEventListener('load', onload);
}然后您就有了一个快速的、没有库的解决方案，它不依赖于警报对话框。
Stack Overflow用户
发布于 2013-09-06 05:45:36
一个可能的(但不太麻烦的解决方案)：
将页面加载到iFrame中，并将就绪事件侦听器附加到iFrame。下面是一个如何做到这一点的例子
jQuery .ready in a dynamically inserted iframe
通过这种方式，您可以控制外部页面的DOM，同时监视iFrame加载时间。
https://stackoverflow.com/questions/18650068
复制相似问题
腾讯云开发者
