1

私は現在、長いページのWebサイトに多数のコンテンツをロード/プリロードする方法を模索している最中です。

私が考えた解決策は、前の部分がロードされた後にコンテンツをロードすることです。

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をロードする方法はありますか？ロードしたら、Panel2などをロードします...

私が見たほとんどのソリューションでは、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呼び出しの完了ハンドラーを使用して後続の各パネルのロードをトリガーすることで機能します。

実例| ソース

以下のコメントでは、画像などが完了するのを待つことについても話しました。bodyWindowsで取得するマスターの要素が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 に答える