0

我正在使用 AJAX 在我的网站上加载页面。

在加载页面时 - 我希望徽标旋转以表示它正在加载。

用于在页面加载时控制 css 的 jQuery（不确定它是否真的是 javascript，我是 java/jquery 的新手）是

function loadPage(url)
{
url=url.replace('#page','');

$('#logo').css('display','none;');

$.ajax({
    type: "POST",
    url: "load_page.php",
    data: 'page='+url,
    dataType: "html",
    success: function(msg){

        if(parseInt(msg)!=0)
        {
            $('#pageContent').html(msg);
            $('#logo').css('visibility','visible');
        }
    }

控制动画的 CSS 是

    @-webkit-keyframes spin {
        from {
            -webkit-transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
        }
    }



    @-moz-keyframes spin {
        from {
            -moz-transform: rotate(0deg);
        }
        to {
            -moz-transform: rotate(360deg);
        }
    }

    @-ms-keyframes spin {
        from {
            -ms-transform: rotate(0deg);
        }
        to {
            -ms-transform: rotate(360deg);
        }
    }

    #logoholder { 

    }

    #logo   { 
        background: url(images/logo.png) 0 0 no-repeat; 

        width: 130px; 
        height: 130px; 
        -webkit-animation-name: spin; 
        -webkit-animation-duration: 1000ms; /* 40 seconds */
        -webkit-animation-iteration-count: infinite; 
        -webkit-animation-timing-function: linear;

        -moz-animation-name: spin; 
        -moz-animation-duration: 1000ms; /* 40 seconds */
        -moz-animation-iteration-count: infinite; 
        -moz-animation-timing-function: linear;

        -ms-animation-name: spin; 
        -ms-animation-duration: 1000ms; /* 40 seconds */
        -ms-animation-iteration-count: infinite; 
        -ms-animation-timing-function: linear;

        /* boooo opera */
        -o-transition: rotate(3600deg); /* works */
    }

是否有我可以添加到 CSS（通过 jquery）的属性，以便在页面未加载时徽标不会旋转......目前徽标不断旋转

也许我可以从“#logo”选择器中删除一个属性，这将使旋转无效

然后我可以在页面加载时（通过javascript）添加某个属性以使旋转工作？

谢谢

4

3 回答 3

1

与其将 CSS 动画绑定到#logo，不如将其绑定到一个类，例如.spin. 当 Ajax 启动时，将spin类添加到#logo，使用addClass：

$("#logo").addClass("spin");

当 ajax 内容完成加载后，使用removeClass：

$("#logo").removeClass("spin");

这样您就可以轻松地正常显示徽标，并使其仅在 ajax 处于活动状态时才旋转。

于 2013-01-27T20:00:18.397 回答
0

<body class="loading">在你的页面中使用类似的东西。

然后在页面底部，有$('body').removeClass('loading');

然后使用选择器定位您的 css 动画body.loading #logo。

页面完全加载后，jquery 将删除 .loading 类并且动画停止。

同样在您的活动中，$.ajax您应该在事件中添加.loading课程beforeSend并删除课程。complete

于 2013-01-27T20:01:13.360 回答
0

看起来您最初隐藏了徽标，并在内容加载后显示（如评论中所述）。此外，您正在使用该display属性来隐藏它，并使用该visibility属性来隐藏它。那些不一样。我在下面切换了您的功能，并将该display属性用于两者。不确定是否还有其他错误，但试一试，它应该会让你朝着正确的方向前进。

function loadPage(url)
    {
    url=url.replace('#page','');

    $('#logo').css('display','block');

    $.ajax({
        type: "POST",
        url: "load_page.php",
        data: 'page='+url,
        dataType: "html",
        success: function(msg){

            if(parseInt(msg)!=0)
              {  
               $('#pageContent').html(msg);
               $('#logo').css('display', 'none');
            }
        }
于 2013-01-27T20:18:28.027 回答