0

サイトの次のページから必要なコンテンツを介して無限スクロールの読み込みをエミュレートする tumblr ページ用の小さなjQueryスクリプトを作成しています (これはtumblrサイトなので、ページネーションは問題ありません)。 いくつかの無限スクロールプラグインがあることは知っていますが、私が試したものはすべてうまくいきませんでした。私はそのすべての機能を必要としません。スクリプトは必要な新しい要素をロードしますが、問題は毎回 2 つのページからコンテンツをロードすることです。そして、明らかに、代わりに 1 つのページ コンテンツのみをロードする必要があります。jQuery.get()

jQueryは次 のとおりです。

    $(document).ready(function() {
      "use strict";
      var nextPage = 2;
      var totalPages = {TotalPages};
      var url = '/page/'; // base url
      $(document).on('scroll', function() {
        if (nextPage <= totalPages) { // if exist new pages
          if ($(window).scrollTop()== $(document).height() - $(window).height()) { // when reach the page bottom
            $.get(url + nextPage, function(data){ // get the next page
              $(data).find(".post").appendTo(".posts"); // filter content we want and append it to the actual page element
              picturefill(); // reload picturefill,making the new images responsive
            });
            nextPage++; // increment nextpage counter
          };
        } else { // exit if no more pages
          return;
        }
      });
    });

読み込まれるコンテンツは次のとおりです。 

<div class="posts">
<article class="photo-container post" id="{PostID}" data-reblog="{ReblogURL}">
    <div class=" picturefill" data-picture data-alt="" data-class="photo">
        <div class="picturefill" data-src="{PhotoURL-HighRes}" ></div>
        <div class="picturefill" data-src="{PhotoURL-500}" data-media="(max-width: 568px)"></div>
        <div class="picturefill" data-src="{PhotoURL-250}" data-media="(max-width: 250px)"></div>
        <img alt="" class="photo" src="http://img.jpg"> <!-- generated by picturefill -->
        <noscript><img class="photo" src="{PhotoURL-HighRes}" alt=""></noscript>
    </div>
    <!-- MORE CODE -->
</article>

レスポンシブ画像にPicturefillを使用していますが、うまく機能します。誰にもアイデアがありますか？ありがとう。

4

1 に答える 1

1

(質問の編集で回答。コミュニティ wiki の回答に変換。質問への回答が質問自体に追加された場合の適切なアクションは何ですか? を参照してください。 )

OP は次のように書いています。

lastLoadingPosスクリプトがページ コンテンツを挿入した最後の位置 (ドキュメントとの相対位置) を格納する制御変数を使用して問題を解決しました。その位置が変わらない場合、挿入は行われません。これは、スクリプトが同じ位置でページの下部に複数回到達したことを検出するため、複数のコンテンツの挿入が発生するためです。ええ、これで問題は解決しましたが、エレガントではなく、適切な解決策ではないと思います。ただの回避策。誰かがアイデアを持っていれば、それは好評です:D

私の回避策（もちろん、まだ1つか2つ追加する必要があります）：

$(document).ready(function() {
  "use strict";
  var nextPage = 2;
  var lastLoadingPos = 0; // stores last insertion position (document related)
  var totalPages = {TotalPages};
  var url = '/page/'; // base url
  $(document).on('scroll', function() {
    if (nextPage <= totalPages) { // if exist new pages
      var top = $(window).scrollTop();
      if ((lastLoadingPos != top) && (top== $(document).height() - $(window).height())) { // when current bottom position reached first time
        lastLoadingPos = top; // new last insertion position
        $.get(url + nextPage, function(data){ // get the next page
          $(data).find(".post").appendTo(".posts");  // filter wanted content
          picturefill(); // reload picturefill, making new images responsive
          nextPage++; // increment nextpage counter
        });
      }
    } else { // exit if no more pages
      return;
    }
  });
});
于 2015-02-08T20:18:28.357 に答える