1

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

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

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>

有没有办法加载面板 1，然后一旦加载，加载面板 2，依此类推...

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

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

4

2 回答 2

2

如果您真的想单独加载它，那正是 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调用的完成处理程序触发每个后续面板加载。

实例| 资源

在下面的评论中，您还谈到了等待图像等完成。缺少您使用 windows 获得body的 master 元素onload，我们必须检查不完整的图像（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) {
    $("<p>").html(String(msg)).appendTo(document.body);
  }
})();

实例| 资源

那只处理图像，但您也应该能够概括视频的概念（我没有处理video标签，而且我不知道您使用它们而不是 Flash 视频等 - 我也没有处理）。

于 2013-02-01T19:04:25.500 回答
-1

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

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

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

于 2013-02-01T19:06:10.420 回答