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

我正在使用它来动态加载事件，但没有页面刷新，但加载时间太长，所以为了更好的用户体验我认为我们应该添加“加载事件”或类似的，但我的迄今为止的尝试都是徒劳的。显示'正在加载内容消息'

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

};

非常感谢任何帮助。

谢谢。

来源

2012-05-15 Steven Grant

有几个方法，下面是使用$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请求完成

所以如果你使用的要执行将在第一Ajax请求启动和 $.ajaxStop用同样的方式来注册一个回调执行的方式上面的代码显示和隐藏加载div，它会自动显示当您的$.load函数的ajax请求启动时，加载文本/图像，并在ajax请求完成时隐藏，假设该页面中只有一个$.ajax或$.ajax速记方法。

来源

2012-05-15 19:57:26

那么这与我已有的东西有什么关系？ –

更新了答案，可以让您了解如何在当前设置下使用该代码。 :) –

该Jquery BlockUI plugin是完美的为您的需求。

来源

2012-05-15 19:55:25 xbonez

您需要三样东西：

装载器：

<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-15 19:55:32 Kristian

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

回答

相关问题