显示'正在加载内容消息'

时间:2012-05-15 19:50:56

标签: jquery html ajax web-frontend

我正在使用它在没有页面刷新的情况下动态加载事件,但是在加载时有点太多时间因此为了更好的用户体验,我认为我们应该添加“加载事件”或类似但我的尝试一直是徒劳的所以远。

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;
    })

};

非常感谢任何帮助。

感谢。

3 个答案:

答案 0 :(得分:1)

你需要3件事:

装载机:

<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()

答案 1 :(得分:1)

有几种方法,这是使用$ajaxStart$.ajaxStop

的全局加载图片/文字代码
$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

假设您的加载div的ID为loadingDiv,其中包含文字或加载图片。

<强>更新

$.load是一个jQuery Shorthand method,与其他几个一样,例如$.post$.get$getJSON$.getScript使用了$.ajax功能。

$.ajaxStart是一种在第一个ajax请求启动时注册要执行的回调的方法 $.ajaxStop的使用方法与注册所有ajax请求完成时要执行的回调的方式相同

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

答案 2 :(得分:0)

Jquery BlockUI plugin非常适合您的需求。