延迟 js 加载的最佳方法？

Question

我正在使用需要几个 javascript 文件的 bootstrap 主题。在我的一些页面上，我从服务器加载了相当多的内容，这意味着在评估 javascript 文件时，并不是所有的 html 都会出现在页面上。

这可以防止事件处理程序绑定到 html，后者在计算 javascript 之后加载。到目前为止，我已经通过在 ajax 调用完成后加载脚本来解决这个问题，但这对我来说似乎很矫揉造作。这是我的函数：

$.get("/path/to/rest/call", function(data) {
    $('#htmlElement').html(data);
}).done(function() {
    $.getScript("/path/to/js/file.js");
});

我觉得有更好的方法来做到这一点。有吗？

Answer 1

可能有比动态加载 metroui 库更简洁的方法来解决这个问题。看起来它取决于 jQuery 的 .ready() 来知道页面何时加载以及何时可以初始化它的东西。但是，这对您不起作用，因为您是通过 Ajax.

动态加载内容

您可以做的是推迟 jQuery ready() 通知，直到您的 ajax 内容加载完毕。这将推迟 metro 初始化的触发，直到您的动态内容加载完毕。这将允许您像他们的文档建议的那样在 <head> 部分的股票 <script> 标签中加载地铁。其工作方式是在加载 jQuery 后将其添加到 <head> 部分：

<script>
    jQuery.holdReady(true);
</script>

然后，在您的 ajax 代码成功完成后，您执行此操作（从成功处理程序，在您将新内容放入页面后）：

 jQuery.holdReady(false);

然后释放 jQuery 调用它的 .ready() 处理程序，metro 将在您的内容加载后执行它。

参见 jQuery doc jQuery.holdReady(...)。

延迟 js 加载的最佳方法？

Best way to delay js loading?

javascript

ajax

event-handling

twitter-bootstrap