Я разработал бесконечную прокрутку для своего веб-сайта электронной коммерции. Все работает отлично, но у меня на некоторых страницах есть более 100 продуктов, и клиентов действительно раздражает, что им приходится начинать все сначала, как только они нажимают кнопку «Назад» (когда они просматривают продукты).

Я попробовал функцию replaceState - я сохранил строку jSON после # в URL-адресе, которая сохраняет текущую позицию сверху, и 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

0
user7216260 27 Ноя 2016 в 16:32

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();

Используйте это для сохранения HTML текущей страницы или контейнера (И горизонтального положения полосы прокрутки) при переходе прочь со страницы.

Затем, вернувшись «назад», проверьте, содержит ли ключ какие-либо данные в нем, если это так, я бы использовал jquery для загрузки содержимого в div.

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

Затем используйте jquery для прокрутки до позиции, возможно, сохраните ее под другим ключом.

$.scrollTo(sessionStorage.getItem('my-last-scroll-bar-position'));
0
Stavm 27 Ноя 2016 в 14:15

Вы можете сохранить результаты AJAX с помощью localStorage и добавить обработчик нагрузки для вашего скрипта, который сначала создает результаты из localStorage перед выполнением любых запросов AJAX.

0
Jesse Kochis 27 Ноя 2016 в 13:37