jQuery按顺序加载内容 [英] jQuery load content sequentially

问题描述

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

I'm currently in the middle of trying to figure out how I can load / preload a large number of content on to a long page website.

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

The solution I thought of, is to load content, after a previous part has loaded.

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，依此类推...

Is there a way to load Panel 1, then once that has loaded, load Panel 2 and so on...

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

With most solutions I've looked at, they have suggested loading the content through an external file using the .load() method in jQuery.

如果有人有任何建议和/或示例或示例代码，那将是惊人的.

If anybody has any advice and/or examples or example code that would be AMAZING.

推荐答案

如果您真的想单独加载它，那正是jQuery的 load 用于.例如，假设您在这些元素上放置了data-page属性，以告知每个元素应具有的内容:

If you really want to load it separately, that's exactly what jQuery's load is for. For example, suppose you put a data-page attribute on those elements telling each of them what content it should have:

<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>

(您没有没有做到这一点，这只是您告诉他们的一种方式.)

(You don't have to do that, it's just one way you might tell them.)

然后按顺序加载它们(如果您确实希望按顺序加载)是相当简单的:

Then loading them sequentially (if you really want it to be sequential) is fairly straight-forward:

// 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调用的完成处理程序触发随后的每个面板加载来实现的.

That works by triggering the first panel's load when the page is first rendered, and then triggering each of the subsequent panel loads using the completion handler of the previous load call.

实时示例 | 源

在下面的评论中，您谈到了等待图像等操作.缺少通过Windows获得的主版onload的body元素，我们必须检查不完整的图像(HTMLImageElement具有complete属性)并挂接其load事件.当没有更多不完整的图像时，我们将加载下一个面板:

In the comments below you talked about waiting for images and such to complete as well. Lacking a body element for the master onload that you get with windows, we have to check for incomplete images (HTMLImageElement has a complete property) and hook their load event. We load the next panel when there are no more incomplete images:

(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视频)等等.我也没有处理过.)

That only handles images, but you should be able to generalize the concept for videos as well (I haven't dealt with video tags, and I don't know that you're using them as opposed to Flash videos, etc. — which I also haven't dealt with).

这篇关于jQuery按顺序加载内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！