Question

我为我的电子商务网站开发了一个无限卷轴。一切都很好，但我在某些页面上有100多种产品，这对客户来说非常烦人，他们必须重新开始，一旦他们点击后退按钮（当他们正在预览产品时）。

我尝试了replaceState功能 - 我在保存当前位置的网址jSON之后保存了#字符串，offset我会在顾客返回后使用。太可怕了。在最新版本的iOS Chrome和Safari上根本没有用，在某些Windows 7浏览器上，它实在是太落后了。

无论如何，有人试过History.js吗？这是一个**的痛苦吗？其他方法怎么样？我在考虑将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

Answer 1

您可以使用localStorage存储AJAX结果，并在脚本中添加一个加载处理程序，该加载处理程序在发出任何AJAX请求之前首先从localStorage构建结果。

Answer 2

如果你不介意支持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'));

具有工作历史的无限滚动返回jQuery

2 个答案: