Question

我写了一些JavaScript来使用Ajax动态加载图库。我还实现了适用于所有浏览器的后退按钮支持。问题是当您使用滑动手势返回到野生动物园时（但只有该手势，后退按钮才能正常工作）。该页面冻结约4-5秒（您甚至无法滚动或单击任何内容），然后按预期工作。

我在做什么：

首次加载页面时，它会进行ajax调用以获取可用的相册。然后创建DOM元素并使用淡入淡出动画进行显示。此后，将数据（只是重新创建元素所需的数据，而不是整个HTML）保存在pushState中。
如果单击某张专辑，它将再次调用ajax来获取照片，删除之前插入的所有元素，并使用淡入淡出动画添加新的元素。它还可以保存状态。

后退按钮按以下方式处理：

window.addEventListener('popstate', function (e) {
    let prior = e.state;

    if (prior.type == 'albumCollection') {
        //Remove album information
        $(".album-info-wrap").hide().children().remove();
        //Show filter options and show the page header with title
        $(".album-filter-wrap").show();
        $("header.entry-header .entry-title").show();

        initAlbumList(prior.itemList);
        showAlbumList();
    }
});

function initAlbumList(data) {
    itemList = data;
    albumInItemList = true;
}

function showAlbumList() {
    if (!albumInItemList) {
        return
    }
    $("html,body").animate({scrollTop: 0}, "fast");
    clearGrid();

    del = 0;
    $.each(itemList, function (index, element) {
        var $item = $("<div>", {
            class: "grid-item grid-item-album",
            id: element.id
        }).hide().append(
            $("<div>", {class: "grid-item-overlay"}).append(
                $("<div>", {class: "grid-img-head d-flex justify-content-between"}).append(
                    $("<span>", {class: "grid-img-head-text"}).text(element.title)
                ),
                $("<img>", {class: "img-fluid", src: element.cover, srcset: `${element.cover2x} 2x`}))
        );
        $grid.append($item);
        $item.delay(del).fadeIn(300);
        del += 80;
    });
    window.history.pushState({itemList: itemList, type: 'albumCollection'}, '', 'loc='
        + selectedLocation + '&year=' + selectedYear);
}

使用ajax加载页面上的向后滑动手势可冻结macOS和iOS上的Safari

0 个答案: