Question

当我按下我的网站中的链接时，我尝试使用此代码（下面）淡入div内容，而不是当我按下另一个链接并且新内容淡入时淡出。您可以在此处看到此示例：

http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

好吧，我需要在加载之前在每个页面的顶部放置一个动画gif预加载器。有人可以用jquery代码帮我吗？感谢..

交换内容和淡入/淡出的代码：

$(document).ready(function() {
    $("#content").css("display", "none");
    $("#content").fadeIn(1000);
    $("a").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("#content").fadeOut(1000, redirectPage);
    });
    function redirectPage() {
        window.location = linkLocation;
    }
});

Answer 1

使用此选项添加加载叠加层。

$("a").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#content").fadeOut(1000, redirectPage);    
    $("body").append("<div class='LoadingOverlay' />");
}

然后使用CSS来控制它的渲染方式。

.LoadingOverlay
{
    z-index:1000;
    position:fixed;
    width:124px;
    height:124px;
    left:50%;
    top:50%;
    margin-left:-62px;
    margin-right:-62px;
    background-image:url(/images/loading51.gif);
}

通常我会在新的ajax调用完成后执行此操作

 $(".LoadingOverlay").remove();

但是，预装完成后，您似乎将加载新页面，因此您不需要这样做。

使用预加载器进行jQuery平滑页面转换

1 个答案: