javascript - PHP 加载时的预加载器

Question

我想在使用 ajax 加载 php 文件时添加一个预加载器。可以使用jquery吗？谢谢你。

Answer 1

您可以使用 jQuery.ajax 的参数来完成此操作；将您的预加载器内容设置为标记并使 CSS 默认隐藏它，但在添加类时让它显示。

例如，假设我们有一个 div，它是我们的预加载器。在其中，我们有一条消息说“正在加载”。CSS3 将允许我们自动将 .preloader 类更改为 .preloader.show 的动画，然后我们所要做的就是从持有者中添加和删除这些类。

这将是标记：

<div class="preloader">
    <h1>Loading...</h1>
</div>​

然后是 CSS3：

    .preloader {
        /* written in CSS 3.0 */
        opacity: 0;
        font-size: 36px;

        -webkit-transition: 0.2s all;
         -khtml-transition: 0.2s all;
           -moz-transition: 0.2s all;
            -ms-transition: 0.2s all;
             -o-transition: 0.2s all;
                transition: 0.2s all;

        -webkit-transform: scale( 0.1 );
           -moz-transform: scale( 0.1 );
            -ms-transform: scale( 0.1 );
             -o-transform: scale( 0.1 );
                transform: scale( 0.1 );
    }
    .preloader.show {
        opacity: 1;

        -webkit-transition: 0.2s opacity;
           -moz-transition: 0.2s opacity;
            -ms-transition: 0.2s opacity;
             -o-transition: 0.2s opacity;
                transition: 0.2s opacity;

        -webkit-transform: scale( 1 );
         -khtml-transform: scale( 1 );
           -moz-transform: scale( 1 );
            -ms-transform: scale( 1 );
             -o-transform: scale( 1 );
                transform: scale( 1 );
    }

最后是javascript：

$(function() {
    $.ajax({
        url: 'http://code.jquery.com/jquery-latest.js',
        dataType: 'script',
        beforeSend: function(evt) {
            if ( ! $('.preloader').is('.show') ) $('.preloader').addClass('show');
        },
        complete: function(jqXHR, textStatus) {
            // disable either here or at the end
            $('.preloader').removeClass('show');

            // handle error and success
        }
});

}); ​</p>

我为你上传了这个例子@JSFiddle，这里是来源：http: //jsfiddle.net/8XP9r/15/

这就是它的样子：http: //jsfiddle.net/8XP9r/15/embedded/result/

告诉我事情的进展！XD

Answer 2

当您发起请求时，您可以添加加载内容。使用complete回调函数，您可以删除加载的东西。这很简单。这是一个例子。

function loadSomething(url) {
    showLoading();

    $.ajax(url).complete(function(data) {
        hideLoading();

        console.log(data);
    });
}

分别在哪里showLoading()和hideLoading()管理您的预加载器。