Question

我正在使用jQuery maximage，它的核心是jQuery Cycle，用于浏览幻灯片，并在每次转换时修改（替换）位置哈希。

它有效，除非你尝试导航太快;此时浏览器（在Firefox和Chrome中测试）将崩溃，因为页面无休止地尝试重新加载。

$(function(){
    var h, 
        hash = window.location.hash, 
        hashes = {},
        index = 0;
    // Iterate slides into hashes object
    $('#slides').children('div').each(function(i) {
        h = $(this).attr('id');
        // Change IDs to hash format
        h = h.replace(/\ /g, '-');
        hashes[h] = i;
        slideInteger = i
    });
    if (hash) {
        index = hashes[hash.substring(1)] || index;
    };
    $('#slides').maximage({
        cycleOptions: {
            startingSlide: index,
            cssTransitions: true,
            after: onAfter,
            fx: 'fade',
            speed: 360,
            timeout: 0
        },
        onFirstImageLoaded: function(){
            $('#cycle-loader').hide();
            // Remove tooltip on hover
            $('.mc-image').hover(function(){
                $(this).removeAttr('title');
            });
        }
    });
    function onAfter(el, next_el, opts) {
        var nextHash = $(next_el).find('.slideLink').text().toLowerCase().replace(/\ /g, '-');
        window.location.replace(('' + window.location).split('#')[0] + '#' + nextHash);
    };
    $(window).on("hashchange", function() {
        $('#slides').cycle(hashes[window.location.hash.substring(1)] || 0);
    });
});

我尝试用...替换onAfter函数

function onAfter(el, next_el, opts) {
    var nextHash = $(next_el).find('.slideLink').text().toLowerCase().replace(/\ /g, '-');
    if( window.location.hash != ('#' + nextHash) ){
        window.location.replace(('' + window.location).split('#')[0] + '#' + nextHash);
    }
};

......但它似乎没有任何区别。

这似乎也不是我在jsfiddle中可以复制的东西 - 所以对缺乏物理演示道歉。

Answer 1

您应该使用HTML5 history.pushState / history.replaceState API。你也有旧版浏览器的垫片。

https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history “添加和修改历史记录条目”

快速location.replace导致浏览器崩溃

1 个答案: