Question

我有一个页面，使用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，所以看起来不会有差别。

简单地说 - 如何在不等待DOM Ready的情况下从另一个页面加载特定的DIV ID，无论是jQuery，JavaScript，iFrame还是其他方法？第二个问题

由于

Answer 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>。这是

的例子

var scroll = $('.verticalScrollBar');

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

Answer 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的需要。

在DOM Ready之前使用jQuery加载函数

2 个答案: