加载DOMContentLoaded后，在jQuery中进行脚本异步调用的正确方法？

我正在努力找出重写代码的最佳方法。基本上，我们有一些广告是在页面加载后通过AJAX加载的（不是高优先级的，所以我们不希望它阻止DOM呈现）。这是我在Firefox的网络工具中看到的：

这是当前代码：

$(document).ready( function() {
    ....
    $.getJSON("/cgi-bin/links/spots_load_new.cgi", {
        catid: category_id,
        linkid: link_id,
        t: temp_set
    }, function(results) {
        showSpots(results);
    });

});

…这就是我在阅读了<代码>$之后所想的方法。when（）-：

---

但是，这些项似乎仍然在DOMContentReady之前被调用。怎么办

您的两个代码的作用完全相同

您需要用

$（文档）包装您的代码。准备好如下所示：

$(document).ready(function(){
    // $.getJSON...
});

$(window).on('load', function() {
  $.getJSON("/cgi-bin/links/spots_load_new.cgi", {
    catid: category_id,
    linkid: link_id,
    t: temp_set
  }, function(results) {
    showSpots(results);
  });
});

$(function() {
  // your other jQuery code...
});

首先，请注意问题中的两个代码块是等效的。如果希望在加载页面中的所有其他内容后执行该代码，则可以挂接到
窗口的
加载
事件，如下所示：

$(document).ready(function(){
    // $.getJSON...
});

$(window).on('load', function() {
  $.getJSON("/cgi-bin/links/spots_load_new.cgi", {
    catid: category_id,
    linkid: link_id,
    t: temp_set
  }, function(results) {
    showSpots(results);
  });
});

$(function() {
  // your other jQuery code...
});

在（'load'，function（）{/*您的代码…*/}）上，将该代码块包装在
$（窗口）@Rorymcrossan谢谢-成功了！很高兴它对你有用。我把它作为一个答案添加了进去。或者简写为：$（function（）{//Code here}）@谢谢，但我已经有了：）我没有提到它，因为我认为它有点基本。。。但我会更新我的问题谢谢。我认为$.when（）函数会导致运行某些东西，但不会阻止页面呈现。我没有意识到
$（document）.ready（）
和
$（window.on）（“load”）
之间有区别，因为请求是异步的
$。是的，区别在于document.ready在DOM准备就绪时启动（尽管样式表、图像等仍可能被加载），而window.load在加载所有内容后启动。我不敢相信这个简单的调整在速度上造成的差异！我们从1.75秒DOM、2.79秒加载和3.47秒完成-到1.09秒DOM、1.82秒加载和2.38秒完全加载！这几乎是整整一秒钟：）我很想看看这会如何影响上的值Pingdom@pwolaq实际上是两个独立的请求。每次加载一些JSON，然后将内容放入页面。不过，它们只是广告，所以不重要，不足以让页面等待。我只是在使用FireFox网络工具查看页面加载时间（并在私有窗口中执行此操作，以避免缓存）。我想真正的测试将是看看它如何在Pingdom中与真正的访问者一起工作。我会随时通知你的@pwolaq-作为更新。我们的pingdom统计数据无疑显示了速度的提高。现场加载时间已从平均1.9秒增加到1.75秒。。。因此，仅仅在页面呈现之后运行几个AJAX调用并不太糟糕！