这似乎是已回答数百次的问题,但我找不到可行的解决方案。
我有这个代码:
<script>
$("#content div").hide();
$("#loader").show();
$("#content div").load("file.html", function () {
$("#loader").fadeOut('slow', function() {
$("#content div").fadeIn('slow');
});
});
</script>
<html>
<div id="content">
<div></div>
<img src="loader.gif" />
</div>
</html>
就我而言,加载函数内部的内容应该在加载 file.html 之后发生,但它隐藏了加载器图像并显示内容 div(在本例中是巨大的图像,但它可以是任何东西) )并且它仍然加载此内容 - 加载过程尚未完成。谢谢。
最佳答案
描述
因为 .load()
使用 ajax,所以显示“正在加载”指示器的正确方法是使用 jQuery 的 ajaxStart
和 ajaxComplete
事件.
jQuery.ajaxStart() Register a handler to be called when the first Ajax request begins. This is an Ajax Event.
jQuery.ajaxComplete() Register a handler to be called when Ajax requests complete. This is an Ajax Event.
示例
$(document).ajaxStart(function() {
$("#loader").show();
});
$(document).ajaxComplete(function() {
$("#loader").fadeOut('slow');
});
更多信息
关于jquery - 显示加载程序时预加载 div 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9177511/