最后加载特定的 div答案

【问题标题】：Make a specific div load last最后加载特定的 div
【发布时间】：2011-10-07 06:16:28
【问题描述】：

我正在尝试创建一个页面，其中某个 div（包含大量 php、html 和 javascript 内容）在页面的其余部分之后加载。如果可以，这可能吗？

【问题讨论】：

使用 AJAX？还是在输出 HTML 时？
如果它在流程之外...绝对、固定等，您可以将其作为页面上的最后一个元素。页面上的最后一个元素将是最后一个要加载的元素。否则，请看下面@Darin 的回答。

【解决方案1】：

您可以将此 div 应用为隐藏样式，然后使用 javascript 显示它：

$(function() {
    $('#someDiv').show();
});

但如果你想避免一开始就加载它，你可以使用 AJAX：

$(function() {
    // <div id="container"></div> will be an empty div
    $('#container').load('/script');
});

另请注意，如果您希望在加载所有其他内容（包括图形）后进行此加载，您可以使用$(window).load 而不是$(document).ready：

$(window).load(function () {
    ...
});

【讨论】：

【解决方案2】：

我有一个类似的问题，需要在创建某个 div 后填写数据。我为这个堆栈使用 .ejs 文件。

我所做的是将所有代码拉到 .ejs 页面以我需要的方式对其进行排序。

例如

<script type="text/javascript">
    jQuery making the divs
</script>
<% Pull Data and put it in the divs above %>

【讨论】：

【解决方案3】：

查看 jQuery 的 $.ajax 和相关函数。我想你会发现它们正是你想要的。一个简单的例子：

<script type="text/javascript">
$(function() { // called when page is done loading; you can have lots of these
  $.ajax({
    url: 'other-content.php',
    success: function(data) { $('#load-me-later').html(data); }
  });
});
</script>
<div id="load-me-later"></div>

【讨论】：

$.load() 函数是您发布的代码的简写。

【解决方案4】：

一定的

<div id="the_div">some text or whatever</div>

必须有

 #the_div { display:none; }

在 CSS 中。

然后

 $(document).ready(function() {
     $("#the_div").show();
 });

【讨论】：

【解决方案5】：

有几种方法可以做到这一点。一方面，您可以将该 div 放在页面末尾，然后将 flush() 放在它之前；但这不是很可靠，而且很难获得正确的位置和类似的东西。更好的方法是 ajax：

$.ajax({
  url: 'myurl.php',
  data: someDataMaybe,
  success: function(html) {
    $('#mydiv').html(html); // document.getElementById('mydiv').innerHTML = html would be a thousand times faster, but I've been told jquery people like this more
  }
});

这只会在页面加载后执行，然后将内容加载到 div 中。它当然假设 myurl.php 输出 only 应该在所述 div 中的内容。

假设你有这个页面：

<div id="page">
  <div id="content">
    <!-- lotsa stuff in here -->
  </div>
  <div id="mydiv"></div>
</div>
<script type="text/javascript">
// the stuff above ^
</script>

myurl.php 输出如下：

Some PHP-generated stuff

这会导致：

<div id="mydiv">Some PHP-generated stuff</div>

【讨论】：