如何從第三方腳本中分離頁面加載？

Question

我有這個問題，我的頁面的UI組件像下拉菜單不可用，直到第三方腳本完成加載。這會導致問題，因爲誰知道這些服務器上發生了什麼。我需要從第三方東西的加載中分離頁面的交互組件的可用性...

怎麼樣？

=/

Answer 1

嘗試是這樣的：

<script type="text/javascript"> 
window.onload = function() { 
    var scripts = [ '3rdparty1url','3rdparty2url','3rdparty3url',etc...]; 
    var head = document.getElementsByTagName('head')[0]; 
    for(var i = 0; i < scripts.length; ++i) { 
    var scriptTag = document.createElement('script'); 
    scriptTag.src = scripts[i]; 
    head.appendChild(scriptTag); 
    } 
} 
</script> 

頁面已在客戶端的瀏覽器加載完成後，這將在你的外部腳本文件加載。您的表單UI元素應該都可用。

如果你使用jQuery，你可以這樣做：

<script type="text/javascript"> 
jQuery(function($){ 
    var scripts = [ '3rdparty1url','3rdparty2url','3rdparty3url',etc...]; 
    $.each(scripts, function(i,scrurl) { 
     $('head').append($('<script>', { src: scrurl })); 
    } 
}); 
</script> 

Answer 2

你應該仔細考慮您的網頁，以便它是很好的降解。

請在JS之前的一些「裸」的形式提供的菜單被加載，一旦他們可以再更改UI是superfancy和全花裏胡哨:)

的這也將是有益的那些關閉了JS的用戶（可能並不多，但仍然是......）以及將蜘蛛索引到捕捉菜單內容的用戶。

Answer 3

JS性能大師Steve Souders on JavaScript blocking and asynchronous loading給出了一個很好的概述。谷歌「異步JavaScript加載」瞭解更多信息。有libraries也可以調度和加載外部文件。 Another。