0

我正在使用它来动态加载事件而无需刷新页面，但是加载时间有点多，所以为了更好的用户体验，我认为我们应该添加“加载事件”或类似的东西，但到目前为止我的尝试都是徒劳的。

function calendarAjax () {

    $('#month_nav a').live('click', function() {
        $('#events_container').animate({ opacity: "0" }, 200 ).load($(this).attr('href')+' #events_content' , function(){
            $(this).animate({ opacity: "1" }, 600 );
        });
        return false;
    })

};

非常感谢任何帮助。

谢谢。

4

3 回答 3

1

你需要三样东西：

装载机：

<div id="loader">
I'm loading something
</div>

加载器的 CSS：

#loader {
   /* some design */
}

那么您需要创建一个 javascript 方法来切换其可见性：

var loader = {
    show: function() {
        $('#loader').show();
    },
    hide: function() {
        $('#loader').hide();
    }
};

然后，您只需说出loader.show()想要加载某些内容的时间，以及loader.hide()想要关闭该消息的时间。

于 2012-05-15T19:55:32.917 回答
1

有几种方法，这里是使用$ajaxStart和$.ajaxStop的全局加载图像/文本代码

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

假设您的加载 div 的 IDloadingDiv包含文本或加载图像。

更新

$.load是一个 jQuery速记方法，它像其他几个方法一样，例如$.post、$.get、$getJSON、$.getScript在底层使用$.ajax函数。

$.ajaxStart是一种在第一个 ajax 请求开始时注册要执行的回调的方法，并且 $.ajaxStop用于注册要在所有 ajax 请求完成时执行的回调的相同方式

因此，如果您使用上述代码显示和隐藏加载 div，它将在您的$.load函数的 ajax 请求启动时自动显示加载文本/图像，并在 ajax 请求完成时隐藏，假设您在该页面中只有一个$.ajax或$.ajax速记方法。

于 2012-05-15T19:57:26.830 回答
0

Jquery BlockUI 插件非常适合您的需求。

于 2012-05-15T19:55:25.880 回答