如何在网站上的任何其他内容之前加载特定的 div？答案

【问题标题】：How to load specific div before anything else on the website?如何在网站上的任何其他内容之前加载特定的 div？
【发布时间】：2013-06-09 03:16:42
【问题描述】：

我在网站上有两个 div 面板（left_panel 和 right_panel）。左面板有数百种食物，右面板有小盒子，我们可以看到用户从左面板添加了多少项目。现在的问题是当页面加载时左侧面板需要很长时间才能从数据库中获取数据并且当它完全加载而不是右侧面板出现时。是否有任何 jquery 可以帮助我先加载右面板，然后再加载左面板或网站上的其他任何内容？

【问题讨论】：

把它放在页面的首位？，加载一个空的 div 并在 onload 上 ajax 另一个？

标签： jquery

【解决方案1】：

那里的东西很少

左面板有数百种食物，右面板有小盒子我们可以看到用户从左侧添加了多少项目的顺序面板。

您可以通过使用分页、建议/推荐或搜索来延迟此处加载一些数据。我不会让用户从数百条记录中寻找 reqd 项目的体验非常愉快

页面加载左侧面板需要很长时间才能从数据库中获取数据

当 html 开始呈现时，从数据库中获取记录已经完成，除非您稍后从 XHR/Ajax 请求中推迟这样做。即使通过 AJAX 完成，也会同时完成，可能不会严重影响其他 DOM 元素的加载。

我愿意：

先加载右侧面板。
通过 AJAX 加载左侧面板并实现分页或实时搜索功能。

【讨论】：

【解决方案2】：

最初隐藏右列，并在您的 ajax 函数（或您正在加载内容的任何内容）中放置一个回调，使右列可见。

【讨论】：

【解决方案3】：

我建议在主页加载后使用 AJAX 加载左侧内容。基本概念是有一个空的左面板，填充的右面板作为页面的核心 HTML。然后，当页面在浏览器中加载时，使用 AJAX (jQuery.load) 将左侧列的内容带入。

【讨论】：

【解决方案4】：

$(function)() {
  $("#left").load("leftcontent.html");
});

<div id="right" style="float:right">....</div>
<div id="left"></div>

【讨论】：

【解决方案5】：

如果您在尝试加载的 div 上使用 .load(callback) 方法，然后将用于呈现页面其余部分的函数放入回调中，它将执行您想要的操作。请注意，这是一种不同于基于 url 加载数据的 jQuery 加载方法。

参考：http://api.jquery.com/load-event/

【讨论】：

【解决方案6】：

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

并且在css中隐藏了div的权利

或者使用 ajax 向左加载，完成后正确显示 div？

$.ajax({
  url: "test.php",
//stuff
}).done(function() {
 $("#rdiv").show(); 
});

【讨论】：