有效地在JavaScript小部件中加载多个项目

Question

我正在开发一个JavaScript小部件（使用jQuery），其他人可以将其嵌入到自己的网页中，例如：

<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>

我的窗口小部件需要加载几个项目：

1. jQuery的
2. jQueryUI
3. widget.css
4. 来自我的服务器的数据（使用jQuery.getJSON）
5. 我服务器上的图像（将img标签添加到文档中时）

我目前正在使用链接技术加载2、3和4，这很慢。 由于这三个是独立的，因此我想同时加载它们。 我可以通过不使用回调函数来执行此操作，而是使用jQuery.load（）来表示所有这些都存在，并且可以继续呈现小部件吗？

另外，是否有办法并行加载2、3和4图像？ 立即将img标签添加到小部件，然后在渲染小部件时将其移到正确的位置是否有意义？

Answer 1

如果您正在使用这些库的预设版本，则建议串联并缩小它们。 为了获得加分，请使用用户使用getJSON()从服务器获取的嵌入式数据来引导文件。

这样，只有一个文件可用于Javascript，但是CSS和图像需要分别加载。

当然，除非您不反对使用嵌入以下内容：

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

甚至可以使用数据URI编码的图像：

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

这样，您可以将所有内容简化为对服务器的单个请求，而无需额外的请求来进行初始显示。