带工作历史的无限滚动回到jQuery

我为我的电子商务网站开发了无限滚动。一切都很好，但是我在一些页面上有超过100种产品，这对客户来说真的很烦，他们必须重新开始，一旦他们点击后退按钮（当他们正在预览产品时）。带工作历史的无限滚动回到jQuery

我试过replaceState功能 - 我在保存来自顶部的当前位置的URL #，和offset后保存一个jSON串，我是要客户回国后使用。这太可怕了。在最新版本的iOS中，Chrome和Safari完全没有工作，在一些Windows 7浏览器上，它仍然落后于地狱。

无论如何，有没有人试过History.js？ a **中的痛苦是否一样？其他方法呢？我正在考虑将offset设置为cookie，但浏览器会等待AJAX加载所有产品吗？

这也是我当前的代码（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

来源

2016-11-27 Hristo Torbov

如果您不介意支持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（和滚动条的水平位置）存储。

然后，回去后，检查密钥是否包含任何数据，如果是的话，我会使用jquery将内容加载到div中。

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

然后使用jquery滚动到位置，然后将它保存在另一个键下。

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

来源

2016-11-27 14:15:46 Stavm

太棒了！像魅力一样工作:-) –

你可以使用存储AJAX结果localStorage并向您的脚本添加一个负载处理程序，该程序首先在执行任何AJAX请求之前从localStorage生成结果。

来源

2016-11-27 13:37:23

带工作历史的无限滚动回到jQuery

回答

相关问题