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>

我的小部件需要加载多个项目：

的jQuery
jQueryUI的
widget.css
来自我服务器的数据（使用jQuery.getJSON）
来自我服务器的图像（当img标记添加到文档中时）

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

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

Answer 1

如果你正在使用这些库的预设版本，我建议连接和缩小它们。对于奖励积分，使用用户使用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 + ')';

通过这种方式，您可以将所有内容减少到服务器的单个请求，而无需初始显示所需的其他请求。

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

1 个答案: