jQuery按顺序加载内容

我目前正在试图弄清楚如何将大量内容加载/预加载到长页面网站上。

我想到的解决方案是在加载前一部分之后加载内容。

HTML设置如下所示：

Panel 1
 
Panel 2
 
Panel 3
 
Panel 4 

有没有办法加载Panel 1，然后一旦加载，加载Panel 2等…

对于我看过的大多数解决方案，他们建议使用jQuery中的.load（）方法通过外部文件加载内容。

如果任何人有任何建议和/或示例或示例代码将令人惊讶。

Answer 1

如果你真的想单独加载它，那正是jQuery的load 。 例如，假设您在这些元素上放置了一个data-page属性，告诉每个元素它应该具有哪些内容：

 
Panel 1
 
Panel 2
 
Panel 3
 
Panel 4 

（你不必这样做，这只是你告诉他们的一种方式。）

然后顺序加载它们（如果你真的希望它是顺序的）是相当简单的：

 // Assumes script is at the bottom of the page, just before  (function() { var index = 0, panels = $(".panel"); triggerLoad(); function triggerLoad() { var panel; if (index <= panels.length) { panel = $(panels[index]); ++index; panel.load(panel.attr("data-page"), triggerLoad); } } })(); 

这是通过在首次呈现页面时触发第一个面板的加载，然后使用前一个load调用的完成处理程序触发每个后续面板加载来实现的。

实例 | 资源

---

在下面的评论中，您谈到了等待图像等也要完成。 缺少用于Windows的主加载的body元素，我们必须检查不完整的图像（ HTMLImageElement具有complete属性）并挂钩它们的加载事件。 当没有更多不完整的图像时，我们加载下一个面板：

 (function() { var index = 0, panels = $(".panel"); nextPanel(); function nextPanel() { var panel, imgs; display("Checking for panel #" + index); panel = panels[index++]; if (panel) { panel = $(panel); display("Loading panel"); panel.load(panel.attr("data-page"), panelLoaded); } function panelLoaded() { display("Panel loaded"); imgs = panel.find('img'); imgs.on('load', nextPanelWhenReady); nextPanelWhenReady(); } function nextPanelWhenReady() { var incomplete = imgs.filter(onlyIncomplete); if (incomplete.length === 0) { display("No pending images, loading next panel"); imgs.off('load'); nextPanel(); } else { display("Images left to load: " + incomplete.length); } } function onlyIncomplete() { return !this.complete; } } function display(msg) { $("
").html(String(msg)).appendTo(document.body); } })(); 

实例 | 资源

这只是处理图像，但你也应该能够概括video的概念（我没有处理video标签，我不知道你使用它们而不是Flashvideo等 - 哪个我也没有处理过）。

Answer 2

你可以和each 。 假设您的设置是最终的：

 $('.panel').each(function(){ var panelname = $(this).innerHTML; var result = $.ajax({ url: , async: false, data: panelname }); $(this).html(result.responseText); }); 

或者围绕这个想法，但是你必须有一种方法来区分面板以加载正确的面板。 这个解决方案应该适用于任何数量的面板。