Question

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

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

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

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）时添加某个属性以使旋转工作？

感谢

Answer 1

不是将CSS动画绑定到#logo，而是将其绑定到类 - 例如.spin。当Ajax开始时，使用spin将#logo课程添加到addClass：

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

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

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

通过这种方式，您可以轻松地正常显示徽标，并且只有在ajax处于活动状态时才会旋转。

Answer 2

在页面中使用<body class="loading">之类的内容。

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

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

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

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

Answer 3

看起来您最初隐藏徽标，并在内容加载后显示（如评论中所述）。此外，您使用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');
            }
        }

页面加载时的CSS动画

3 个答案: