作業履歴付き無限スクロールjQueryに戻る

Question

私は電子商取引ウェブサイトの無限のスクロールを開発しました。すべてがうまくいっていますが、いくつかのページには100以上の製品があります。顧客のために本当に面倒です。

私はreplaceState機能を試してみました - 私は、顧客のは、帰国後に使用するつもりだったことを、上から現在位置、およびoffsetを保存し、URLに#後jSON文字列を保存しました。それはひどかった。 iOSの最新バージョンでは、ChromeとSafariはまったく機能しませんでしたが、一部のWindows 7ブラウザでは地獄のように遅れていました。

とにかく、誰でもHistory.jsを試してみましたか？それは同じ**の痛みですか？他の方法はどうですか？私はoffsetをクッキーとして設定しようと考えていましたが、ブラウザはAJAXがすべての製品を読み込むまで待ちますか？

<script type="text/javascript"> 
    $(function() { 
     // LazyLoad 
     function LazyLoad(collection, main, category, sort, offset, limit) { 
      window.ajax = false; 

      $.ajax({ 
       type: "GET", 
       url: "http://daytona.bg/includes/ajax.php", 
       data: "collection=" + collection + "&main=" + main + "&category=" + category + "&sort=" + sort + "&offset=" + offset + "&limit=" + limit, 
       success: function(result) { 
        $.each(JSON.parse(result), function(key, value) { 
         $("#products").append('<div id="products-item">PRODUCT STUFF HERE</div>'); 
        }); 

        window.ajax = true; 
       } 
      }); 
     } 

     // Globals 
     window.ajax = true; 

     // Variables 
     var collection = 'fall-winter'; 
     var main = 'women'; 
     var category = 'jackets'; 
     var sort = 'new'; 
     var offset = 0; 
     var limit = 12; 

     // OnLoad 
     $(window).load(function() { 
      LazyLoad(collection, main, category, sort, offset, limit); 
     }); 

     // OnScroll 
     $(window).scroll(function() { 
      if($(window).scrollTop() >= ($(document).height() - $(window).height() - 900) && window.ajax == true) { 
       LazyLoad(collection, main, category, sort, offset +=12, limit); 
      } 
     }); 
    }); 
</script> 

---

はこちらHMからクールな例です：

http://www2.hm.com/bg_bg/jeni/pazaruvane-po-vid-produkt/jaketa-i-palta.html

Answer 1

もしあなたがI.E8以上をサポートしても構わないのであれば、あなたはsessionStorageを使うことができます（localStorageとは違って、このキャッシュはTABやセッションに固執します。自身）

Mozilla APIは、いくつかの例を提供しています：

// Save data to sessionStorage 
sessionStorage.setItem('key', 'value'); 
// Get saved data from sessionStorage 
var data = sessionStorage.getItem('key'); 
// Remove saved data from sessionStorage 
sessionStorage.removeItem('key'); 
// Remove all saved data from sessionStorage 
sessionStorage.clear(); 

は離れページからをナビゲート時）現在のページまたはコンテナのdivのHTML（ANDスクロールバー水平方向の位置を保存するために、これを使用しています。

「back」に行くと、そのキーにデータが含まれているかどうかを確認します。存在する場合は、jqueryを使用してdivにコンテンツを読み込みます。

$selector.load(sessionStorage.getItem('your-unique-key')).stop().hide().fadeIn(); 

jqueryを使用して位置をスクロールし、可能であれば別のキーの下に保存します。

$.scrollTo(sessionStorage.getItem('my-last-scroll-bar-position')); 

Answer 2

あなたが使用してAJAXの結果を格納することができここで

も私の現在のコード（AJAXのみ、ノー履歴機能）ですlocalStorageを読み込み、スクリプトにロードハンドラを追加します。ロードハンドラは、AJAXリクエストを行う前にlocalStorageの結果を最初にビルドします。