有效地加载多个项目在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控件

回答

相关问题