Question

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

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

};

非常感谢任何帮助。

感谢。

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

Answer 2

有几种方法，这是使用$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速记方法。

Answer 3

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

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

3 个答案: