Question

我想在页面转换中结合两种技术。首先，当用户点击链接时，点击事件应该延迟大约200毫秒并显示css动画（例如：淡入淡出），之后新页面将正常加载。然后，对于网速较慢的访问者，他们将在第一个动画后立即显示预加载器。问题是，似乎这两种技术都不适合彼此。有什么建议吗？

PS：实际上我受到这些家伙网站的启发：http://rsq.com/

这是我的代码：

$body = $("body");
$(document).on({
    ajaxStart: function () {
        $body.addClass("loading"); //for slow connection, visitors with faster connection may not notice this...
    },
    ajaxStop: function () {
        $body.removeClass("loading");
    }
});
$('a').on("click", function () {
    if ($(this).attr('href') != '#') {
        var href = $(this).attr('href');
        $('#wrapper').addClass('fade_animation'); //animation right before new page request
        setTimeout(function () {
            window.location = href
        }, 200);                
        return false;
        $.post($(this).attr('href'));
    }    
});

Answer 1

我认为这已经足够了：

而不是：

    return false;
    $.post($(this).attr('href'));

这样做

    $.post($(this).attr('href'));
    return false;

所以$.post被执行了。

Answer 2

我想我找到了一个解决方案，但不知道这是不是一个好方法，但它确实有效。

$('a').on("click", function(){

        if($(this).attr('href') != '#')
        {
            var href = $(this).attr('href');
            $('#wrapper, footer').addClass('fading animation');
            setTimeout(function() {
                // window.location = href
                $.post(window.location = href) // this line works :)
            }, 200);
        return false;
            // $.post($(this).attr('href'));    
        }

    });

单击事件延迟和预加载器动画

2 个答案: