Question

在我的网站上，有一个区域可以通过AJAX加载几个不同的小部件。有些小部件需要一个外部JS脚本，我的页面的其余部分没有，所以我不想加载该脚本，直到窗口打开该特定小部件。

ajax代码是：

$.get(content_url, null, function(rawResponse, status, xhr) { // get new data
    content_target.html(rawResponse); // replace with new data
    loadingSomething = false;
});

加载的内容是：

<script type="text/javascript" src="http://www.bandsintown.com/javascripts/bit_widget.js"></script>
<script type="text/javascript">var widget = new BIT.Widget({"artist": "{{ id }}"});widget.insert_events();</script>

但是当我这样做时，小部件不会加载。我猜是因为外部脚本没有加载。

有关如何使这项工作的任何想法？请记住，我正在使用自己的外部脚本加载几个不同的小部件，因此将其添加到JS中很困难，因为它在所有小部件中都是标准化的。

思想？

Answer 1

加载这样的脚本有点令人头疼，特别是如果你试图制作跨域的ajax请求。考虑使用HeadJS来改善加载时间，而不会让事情变得非常复杂。

JavaScript loader

并行加载脚本但按顺序执行
head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {

   // all done

});
Head JS在不阻止页面的情况下加载图像等JavaScript文件。即使使用单个组合文件，您的页面也会更快。

使用Javascript脚本在目标容器中加载Ajax

1 个答案:

JavaScript loader