文档准备好之前可能的操作

Question

问题

我写了一个脚本，告知用户页面加载缓慢（比如，这是因为互联网连接速度慢）。 该脚本首先放在<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 。

额外

设置间隔的解决方案是从这里开始的 。 任何其他如何做到这一点的想法都非常感谢。

Answer 1

如果是我，我可能会尝试这样的事情：

<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主体标记之前，您可以访问所有以前解析过的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);
  }
});

...并添加了一点crossbrowseriness，可能是这样的：

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

然后，您将拥有一个快速，无库的解决方案，该解决方案不依赖于警报对话框。

Answer 2

一个可能的（但很小的混乱解决方案）：

将您的页面加载到iFrame中，并将ready事件侦听器附加到iFrame。 这是一个如何做到这一点的例子

jQuery .ready在动态插入的iframe中

通过这种方式，您可以控制外部页面的DOM，同时监控iFrame加载时间。

Answer 3

文档就绪意味着已经读取了DOM。 您可以使用以下方法在Document-Ready之前执行代码：

   ...
  </body>
  <script>window.clearInterval(GLOBAL_INTERVAL);</script>
</html>

这是更低级别的，你不应该在这里使用jQuery。

Answer 4

如何检查document.readyState

  setTimeout(function(){ 
    //after 3 seconds if the document is still not ready the alert will appear
    if(document.readyState=="loading")
     alert("The Internet connection is slow. Please continue waiting.");},3000);

  $(function () {
       alert("document ready");
  });

https://developer.mozilla.org/en-US/docs/Web/API/document.readyState?redirectlocale=en-US&redirectslug=DOM%2Fdocument.readyState

Answer 5

好吧，经过几个小时的伤脑，我已经解决了。 这更多是关于更好的用户体验，而不是技术创新，但适合我的需求。

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