在 DOM 就绪之前使用 jQuery 加载函数答案

【问题标题】：Using jQuery Load Function before DOM Ready在 DOM 就绪之前使用 jQuery 加载函数
【发布时间】：2016-12-01 19:38:49
【问题描述】：

我有一个页面使用 ID 呈现来自同一域上另一个页面的 HTML 块。我当前的代码：

<div id=”testdiv”></div>
<script>
jQuery(document).ready(function(){ 
   jQuery('#testdiv').load('/references/embed1.html #testdiv2'); 
});
</script>

虽然这会正确加载内容，但在页面加载和 jQuery 内容加载之间存在明显的延迟；根据 DIV 内容，有时会显示整整一秒钟，然后它就会弹出到位。这显然是由于页面在 DOM Ready 之前不会尝试检索 HTML 内容，所以我删除了 ready 函数但 Load 函数没有运行。如果我改用 iFrame，它似乎会在浏览器执行代码时加载，但我无法仅包含特定的 DIV ID，并且很难使其响应。查看 $.ajax 但显然 Load 使用 .ajax 所以看起来不会有区别。

简单地说——我如何从另一个页面加载特定的 DIV id 而无需等待 DOM Ready，无论是 jQuery、JavaScript、iFrames 还是其他方法？第二个问题

谢谢

【问题讨论】：

简单...删除jQuery(document).ready(function(){。 如果您的代码完全与您的问题中的一样，它应该可以正常工作。但是请注意，可能仍然会有延迟，除了首先删除使用 ajax 来获取此内容的需要之外，您无法删除该延迟。
为什么投反对票？我说删除准备好的dom对我不起作用。此外，这篇帖子stackoverflow.com/questions/15107074/jquery-load-not-working 指出了同样的问题，并且解决方案已准备好 DOM。
更新了上面的评论。当我的 OP 说我有和 SE 上的其他人有同样的问题（基本上你建议应该工作但没有工作）时，否决从而表明我没有做任何研究是不准确的。
嗯，不。这个问题没有用。它指出该解决方案不起作用，而实际上它确实起作用，并且不提供其他证据。
$(document).ready 仅在您的代码在 dom 中的元素之前执行时才需要。您的示例显示了相反的情况，因此没有它应该可以正常工作。

标签： javascript jquery html ajax

【解决方案1】：

document ready将被触发，直到整个页面加载完毕，只需将其删除，.load() 将在#testdiv 完成 DOM 渲染后被调用。这是示例

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<div id="testdiv"></div>
<div id="error"></div>

<script>
$( "#testdiv" ).load( "/references/embed1.html #testdiv2", function( response, status, xhr ) {
  alert("Triggered");
  if ( status == "error" ) {
    var msg = "Err trying to load ";
    $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
  }
});
</script>

https://jsfiddle.net/Angel_xMu/rer3yuny/1/

【讨论】：

【解决方案2】：

Ajax 不是即时的，您所做的任何事情都不会改变这一点。因此，总会有某种形式的延迟。您可以通过消除对$(document).ready() 的需要来减少延迟，但是我怀疑它仍然不足以让它完成您希望的工作。

$.get('page.html', function (result) {
  // note, you may need to use `.filter` rather than `.find` depending on the structure of `result`
  $('#target').html($($.parseHTML(result)).find('#target2'));
});

或保留您的代码减去$(document).ready 并将其移动到目标 div 之后，就像在您的示例中一样。

完全消除延迟的唯一方法是通过将 html 直接插入页面服务器端来消除使用 $.ajax 的需要。

【讨论】：