Question

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

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

HTML设置如下所示：

<div class="panel">Panel 1</div>
<div class="panel">Panel 2</div>
<div class="panel">Panel 3</div>
<div class="panel">Panel 4</div>

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

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

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

Answer 1

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

<div class="panel" data-page="page1.html">Panel 1</div>
<div class="panel" data-page="page2.html">Panel 2</div>
<div class="panel" data-page="page3.html">Panel 3</div>
<div class="panel" data-page="page4.html">Panel 4</div>

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

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

// Assumes script is at the bottom of the page, just before </body>
(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调用的完成处理程序触发每个后续面板加载来工作。

Live Example | Source

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

complete

Live Example | Source

只处理图片，但你也应该能够概括视频的概念（我还没有处理(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) { $("<p>").html(String(msg)).appendTo(document.body); } })();标签，我不知道你使用它们而不是Flash视频等 - 我也没有处理过。）

Answer 2

您可以使用each。假设您的设置是最终的：

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

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

jQuery按顺序加载内容

2 个答案: