堆棧內存溢出
  簡體   English   中英

文檔准備好之前可能的操作

[英]Possible actions before document is ready

 原文  2013-09-06 04:45:21  3   5    javascript/ html

問題描述

問題

我寫了一個腳本，告知用戶頁面加載緩慢（比如，這是因為互聯網連接速度慢）。 該腳本首先放在<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 。

額外

設置間隔的解決方案是從這里開始的 。 任何其他如何做到這一點的想法都非常感謝。

5 個解決方案

解決方案1
 4  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主體標記之前，您可以訪問所有以前解析過的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);
}

然后，您將擁有一個快速，無庫的解決方案，該解決方案不依賴於警報對話框。

解決方案2
 1  2013-09-06 05:45:36

一個可能的（但很小的混亂解決方案）：

將您的頁面加載到iFrame中，並將ready事件偵聽器附加到iFrame。 這是一個如何做到這一點的例子

jQuery .ready在動態插入的iframe中

通過這種方式，您可以控制外部頁面的DOM，同時監控iFrame加載時間。

解決方案3
 0  2013-09-06 05:45:51

文檔就緒意味着已經讀取了DOM。 您可以使用以下方法在Document-Ready之前執行代碼： 

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

這是更低級別的，你不應該在這里使用jQuery。

解決方案4
 0  

如何檢查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

解決方案5
 0 已采納  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);
   });
})();

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 $（文件）.ready之前的事件 文件准備好之前是否隱藏元素？ jQuery（document）.ready仍在文檔准備好之前運行嗎？ 在所有准備就緒文檔的處理程序運行之前，用戶是否可以與我的網站進行交互？ 在文檔准備好之前，是否可以進行一些客戶端DOM操作？ 是否可以在整個文檔准備好之前（在任何新的GoogleCharts版本上）在網頁上加載Google Chart？ 如何在文檔准備好之前強制從 js 准備好邊距 需要先填充Javascript數組（document）.ready（） 在 document.ready 之前調用 AJAX 在文檔准備好之前是否實例化了全局變量？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM