頁面完全渲染後運行javascript

我正在嘗試創建語法突出顯示器腳本。我試着在一行代碼上使用我的腳本，並且在加載時看到的只是一個空白頁面。腳本完成任務後，所有內容都會顯示出來。順便說一下，我在jQuery的ready函數中調用了我的腳本。頁面完全渲染後運行javascript

$(myFunction);

腳本應該執行後的頁面完全呈現，用戶可以通過即使腳本尚未完成的頁面居然導航。 JavaScript將在後臺運行，因爲它會逐一突出顯示代碼，而不會干擾頁面的響應。提前致謝。

編輯：

爲了使這更清楚，我想後，一切都變得「」而不是「裝」來執行代碼。一切應該已經可以在屏幕上看到，而且用戶可以真正看到代碼在被突出顯示的時候生動起來。謝謝。

來源

2011-12-23 Randal Cunanan

該代碼片段用於DOM何時可以被操作，而不是每個資源已經加載。不幸的是，我不知道有沒有明確的，沒有錯誤的方法來檢查每個元素是否已經加載。 – nickjyc 2011-12-23 02:44:23

[如何在頁面完全呈現時執行Javascript函數？]（http://stackoverflow.com/questions/939538/how-do-you-execute-a-javascript-function-when-the已完全呈現的頁面） – JosephStyons 2011-12-23 16:51:15

您應該在腳本標記，webworkers和onload事件中使用async來創建webworkers。 – 2014-03-06 04:25:04

你的意思是畢竟圖像已經加載？

我覺得window.onload是你在找什麼

window.onload = function() { 
    //dom not only ready, but everything is loaded 
};

編輯

每克里斯的評論，這裏的jQuery的方式：

$(window).load(function() { 
    //dom not only ready, but everything is loaded 
});

來源

2011-12-23 02:46:55

這樣做的jQuery方法是$（window）.load（function（）{...}）; – ChrisM 2011-12-23 02:51:32

謝謝@ChrisM - +1 :) – 2011-12-23 02:52:50

該解決方案無法正常工作。頁面仍然是空白，而JavaScript正在加載。其他解決方案？我編輯了我的帖子以強調我想要發生的事情。謝謝。 – 2011-12-23 03:21:45

不知道到底有多少數據正在被引入......但是如果在文檔準備好的情況下運行了jquery ajax調用並使用完成的方法運行hig熒光筆功能？如果有大量數據，它將會減慢頁面加載速度。

反正想與此類似

$.ajax({ 
      type: "POST", 
      url: "Where data is actually stored", 
      data: { ChannelTypeID: ChannelTypeID }, 
      datatype: "html", 
      beforeSend: function() { 

      }, 
      success: function (myHTML) { 
       $('body').html(myHTML); 
      }, 
      error: function() { 
       alert("Ajax request was unsuccessful"); 
      }, 
      complete: function() { 
       highlighterFunction(); 
      } 
     });

完整方法指定了一個AJAX請求完成時要運行的功能。希望成功能夠儘早觸發數據並讓您的突出顯示正常工作

來源

2011-12-23 03:42:52 afreeland

嗨，要突出顯示的代碼已經在pre標籤中所包含的頁面。 – 2011-12-23 04:39:56

這樣做的一種簡單方法是引入延遲。使用setTimeout（）來實現這一點。例如：setTimeout（func，1000）;

上述行在等待1000毫秒後執行函數「func」。根據加載內容所用的時間，在setTimeout中設置時間域（參數）。

用法示例：

$(document).ready(function(){ 

function func() 
{ 
    alert("hi"); 
} 
setTimeout(func, 1000); 
});

希望這有助於！

來源

2016-02-23 22:03:48

你如何可以授予該頁面將在1000毫秒後加載？所以，更好的選擇是使用window.load函數 – 2016-11-11 10:18:06

問題的辦法的window.onload

即使你使用$(window).load方法，您的熒光筆東西可能得到的東西之前，從$(document).ready完成運行，因爲可能有很多的異步回調函數各地這個地方。

我的做法

我用的等待document.readyState == 'complete和setTimeout的組合。這個想法是，我想等到頁面完全呈現（因此爲'complete'），然後進一步確保已完成$(document).ready JQuery包裝器內容（因此爲setTimeout）。

下面是我將如何解決您的問題，假設200毫秒足以完成$(document).ready(function(){ /*...*/ });內的所有內容。

function highlighterAction() { 
    // actually do the highlighting stuff here 
} 

function highlighter() { 
    /* 
     The short pause allows any required callback functions 
     to execute before actually highlighting, and allows 
     the JQuery $(document).ready wrapper to finish. 
    */ 
    setTimeout(function() { 
     highlighterAction(); 
    }, 200); 
} 

/* 
    Only trigger the highlighter after document fully loaded. This is 
    necessary for cases where page load takes a significant length 
    of time to fully load. 
*/ 
if (document.readyState == 'complete') { 
    highlighter(); 
} else { 
    document.onreadystatechange = function() { 
     if (document.readyState === "complete") { 
      highlighter(); 
     } 
    } 
}

來源

2017-07-07 22:17:08 synaptik

頁面完全渲染後運行javascript

回答

相關問題