如何在頁面加載完成后再去做某事？什么方法可以判斷當前頁面加載已完成？

本文轉載自查看原文 2016-07-25 18:40 2754 JS

javascript提供了document.readyState=="complete"方法來解決當前頁面加載判斷的問題。

 <script type="text/javascript">
   function initView(){ 
  
      if (document.readyState=="complete") 
   { 
      //此處可以填充具體的處理方法 
      alert("The page is already Load!"); 
   } 
   } 
 </script> 
<html> 
<head></head> 
   <body onload="initView();"> 
     <!--具體內容省略-----> 
   </bodu> 
</html> 

===================================================================================
方法一：

    
function waitThenDoIt(){
  try{
    if (window.document.readyState){//IE
      if (window.document.readyState==’complete’){
        doIt();
      }else
        setTimeout("waitThenDoIt()",10);
    } else {//Firefox
        window.addEventListener("load",function(){doIt();},false);
    } 
  } catch (ex) {
  }
}
function doIt(){
  //…
}

將代碼中的：
window.addEventListener("load",function(){doIt();},false);
替換為：
window.addEventListener("DOMContentLoaded",function(){doIt();},false);
也可以。

 

方法二：

做頁面時經常會遇到當前頁面加載完成后，執行某些初始化工作。這時候就要知道如何判斷頁面（包括IFRAME）已經加載完成，代碼如下：

<script language="javascript">
      document.onreadystatechange = statechange;
      function statechange() {
        if(document.readystate == 'complete') {
           for(i=0; i<window.frames[].length; i++) {
              window.frames[i].document.onreadystatechange = statechange;
              if(window.frames[i].document.readystate != 'complete') {
                 statechange();
                 return;
              }
            }
         }
      }
    </script>

此方法可以寫在公用js中，其他方法調用判斷即可

 

方法三：

window..onload的是頁面加載完成后執行的事件，而且winodw.onload不能多次執行，jquery的$(fn)解決了這個問題，但是不使用jquery的情況下呢?以下是老外寫的解決辦法
Js代碼 復制代碼

     
       
    addDOMLoadEvent = (function(){  
        // create event function stack  
        var load_events = [],  
            load_timer,  
            script,  
            done,  
            exec,  
            old_onload,  
            init = function () {  
                done = true;  
     
                // kill the timer  
                clearInterval(load_timer);  
     
                // execute each function in the stack in the order they were added  
                while (exec = load_events.shift())  
                    exec();  
     
                if (script) script.onreadystatechange = '';  
            };  
     
        return function (func) {  
            // if the init function was already ran, just run this function now and stop  
            if (done) return func();  
     
            if (!load_events[0]) {  
                // for Mozilla/Opera9  
                if (document.addEventListener)  
                    document.addEventListener("DOMContentLoaded", init, false);  
     
                // for Internet Explorer  
                 
                 
     
                // for Safari  
                if (/WebKit/i.test(navigator.userAgent)) { // sniff  
                    load_timer = setInterval(function() {  
                        if (/loaded|complete/.test(document.readyState))  
                            init(); // call the onload handler  
                    }, 10);  
                }  
     
                // for other browsers set the window.onload, but also execute the old window.onload  
                old_onload = window.onload;  
                window.onload = function() {  
                    init();  
                    if (old_onload) old_onload();  
                };  
            }  
     
            load_events.push(func);  
        }  
    })();

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 判斷頁面所有圖片加載完成后執行操作 ASP.NET MVC如何在頁面加載完成后ajax異步刷新 html頁面加載完成后再刷新一次 Javascript中頁面加載完成后優先執行順序頁面加載完成后執行JS的方式 JQuery 頁面加載完成后執行事件當頁面完全加載完成后執行一個JS函數頁面加載完成后，觸發事件——trigger（） JavaScript中頁面加載完成后執行頁面加載完成后自動執行一個方法函數的JQ、JS方法