有效地加載多個項目在JavaScript控件

我工作的一個JavaScript小部件（使用jQuery），其他人可以在他們的網頁中嵌入做這樣的事情：有效地加載多個項目在JavaScript控件

<html> 
<head><script type='text/javascript' src="http://example.com/widget.js"></script></head> 
<body> 
<script type='text/javascript' id="widgetAnchor"> 
showWidget(1,2); 
</script> 
</body> 
</html>

我的窗口小部件需要加載幾個項目：

jQuery的
jQueryUI的
widget.css從我的服務器
數據（使用jQuery.getJSON）
從我的服務器的圖像（當img標籤被添加到文檔）

我使用一個鏈接技術，其是慢當前正在裝入的2，3和4。由於三者是獨立的，我想同時加載這些。我可以通過不使用回調函數來做到這一點，而是使用jQuery.load（）來表示所有這些都存在，我可以繼續渲染小部件？

此外，有沒有辦法與2,3和4並行加載圖像？立即將img標籤添加到窗口小部件，然後在渲染窗口小部件後將其移動到正確的位置是否有意義？

來源

2012-01-07 Jeff O' Neill

我想這個問題列出了一些技巧來解決你的問題：http://stackoverflow.com/questions/950087/include-javascript-file-inside-javascript-file – 2012-01-07 18:57:03

你可以將它們合併成一個文件 – sdfadfaasd 2012-01-07 19:53:05

如果您使用這些庫的預設版本，我建議連接並縮小它們。對於獎勵積分，使用用戶從服務器使用getJSON()獲取的嵌入數據引導文件。

這樣，只有一個文件可以用於Javascript，但CSS和圖像需要單獨加載。

當然，除非你不反對使用類似的嵌入以下：

var CSSText = '...'; 
$('head').append('<style>' + CSSText + '</style>');

，甚至還可能使用Data URI編碼的圖像：

var dataURI = '...': 
var widgetImage = new Image; 
widgetImage.src = dataURI; 
$('#my-widget').css('background-image', 'url(' + dataURI + ')';

這樣，你可以將所有減少向您的服務器發出一個請求，不需要額外的初始顯示請求。

來源

2012-01-07 21:51:17

謝謝，很好回答。我一直在使用Google CDN來獲取jQuery，以減少我自己的服務器上的部分負載，但將它們全部整合到我的服務器上的單個js文件似乎是一個更好的解決方案。 – 2012-01-08 05:36:37

有效地加載多個項目在JavaScript控件

回答

相關問題