Javascript 这些ajax调用会进一步延迟页面元素吗？_Javascript_Jquery

Javascript 这些ajax调用会进一步延迟页面元素吗？

javascript jquery

Javascript 这些ajax调用会进一步延迟页面元素吗？,javascript,jquery,Javascript,Jquery,我使用这个伪代码来检索一些json文件，并将其内容放入content div <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <title>Test</title> </head> <body>

我使用这个伪代码来检索一些json文件，并将其内容放入content div

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <title>Test</title>
    </head>
    <body>
        <div id="content"></div>
        <script type="text/javascript" charset="utf-8">
            var my_files = ['http://example.com/file.json', 'http://example.com/file2.json'];
            var params = {
                format: 'json'
            };
            function _populate_content(arg){jQuery("#content").text(arg)}
            jQuery(my_files.each(function() {
                jQuery.ajax({
                    url: url,
                    dataType: 'jsonp',
                    data: params,
                    jsonpCallback: "_populate_content",
                });
            });
        </script>
        <div id="more_content"></div>
    </body>
</html>


试验
var my_files=['http://example.com/file.json', 'http://example.com/file2.json'];
变量参数={
格式：“json”
};
函数_populate_content（arg）{jQuery（#content”）.text（arg）}
jQuery（my_files.each（function（））{
jQuery.ajax({
url:url，
数据类型：“jsonp”，
数据：params，
jsonpCallback:“\u填充\u内容”，
});
});

检索远程文件可能需要一些时间。我的问题是：这段代码会延迟加载和呈现“更多内容”-div吗

是否最好将ajax检索包含在$（document）.ready（）块中？

是。在进行这些调用时，浏览器将进行阻止。您应该在页面加载时执行此操作，以便在执行此操作时，页面可见/呈现：

$(document).ready(function() {
  jQuery(my_files.each(function() {
     // etc...
  }));
});

简短回答：否。由于您没有在.ajax（）参数中定义'async:false'，javascript将异步执行。这意味着您的my_files数组将循环并触发异步调用，然后继续加载页面

您可能希望将您的逻辑包装在$（document）.ready（）中，但在此之前，请在您的more_content div中放置一个按钮，让用户知道信息即将到来。

ajax调用是异步的（除非您另有指定）。因此不会延迟页面加载

此代码是否会延迟“更多内容”-div的加载和呈现

否，因为Ajax调用是异步的（非阻塞）

将ajax检索封装在

$（document.ready（）

块中是否更好

是的。这将在呈现整个DOM后执行Ajax调用。
虽然它可以不使用，但当Ajax调用返回时，您不能100%确定ID为

content

的元素可用。正如@BiAiB所指出的，该元素将可用。不过这仍然是一个很好的实践

顺便说一句，如果你想让你的代码在所有浏览器中都能工作，你应该使用jQuery的

每种浏览器，而不是内置的：
jQuery.each(my_files, function() {
    jQuery.ajax({
        url: url,
        dataType: 'jsonp',
        data: params,
        jsonpCallback: "_populate_content",
    });
});

也许这只是一个简单的示例，但是加载两个URL有意义吗？第二个调用将覆盖第一个调用的结果…ajax调用是异步的，因此没有延迟。
如果将其放入文档就绪块中，
您可以证明，在执行调用之前，浏览器确实呈现了整个页面。
如.ajax（）所示除非设置了async:false，否则调用不会被阻止。啊，对了，谢谢你的澄清。这与我的理解完全相反。干杯！事实上，#content节点出现在脚本之前，所以在他的情况下是可以的，但最好还是使用$（document）.ready（），以防前面的条件不满足。