添加加载动画到jquery ajax .load（）
我目前有这个代码，它很简单
$('#window').load('http://mysite.com/mypage.php'); 但它仅在完全加载后显示内容，并且在此期间#windows元素保持为空。 我想在页面加载之前显示加载图像。 我该怎么办？ jquery网站对此一无所知。 （据我所知）
首先创建一个loading div。
Please wait... 
最初隐藏此DIV并附加代码以在ajaxCall启动时显示此div并在ajax调用完成时隐藏它。
$('#loadingDiv').hide().ajaxStart( function() { $(this).show(); // show Loading Div } ).ajaxStop ( function(){ $(this).hide(); // hide loading div });
编辑
一段时间以来SO格式标签中存在一些问题。 再次添加。
为此，您必须使用gif图像。 首先将#window的html更改为gif图像，直到加载内容为止
工作守则
$('#window').html("
").load('http://mysite.com/mypage.php');
对于我知道有可能花费超过几毫秒的异步请求，我使用Spin.js它没有任何外部依赖性，并且是跨浏览器兼容的
var opts = { lines: 13, // The number of lines to draw length: 10, // The length of each line width: 4, // The line thickness radius: 11, // The radius of the inner circle rotate: 0, // The rotation offset color: '#000', // #rgb or #rrggbb speed: 0.6, // Rounds per second trail: 32, // Afterglow percentage shadow: false, // Whether to render a shadow hwaccel: false, // Whether to use hardware acceleration className: 'spinner', // The CSS class to assign to the spinner zIndex: 2e9, // The z-index (defaults to 2000000000) top: 'auto', // Top position relative to parent in px left: 'auto' // Left position relative to parent in px }; var target, spinner; $(function(){ target = $('#window').get(0); spinner = new Spinner(opts); spinner.spin(target); setTimeout(function(){ spinner.stop(); $(target).html("Loading finished."); }, 3500); });
看小提琴http://jsfiddle.net/y75Tp/73/ （感谢verbumSapienti更新）
1）转到cssload.net并配置一个具有形状，颜色，速度和大小的微调器。 下载代码。
2）将样式代码放入css文件中
3）将div代码放入html文件中，例如：
Please wait... where the #spinnerDiv is the actual div from cssload.
4）在js文件中，添加以下jquery行：
//******************************* // Loading div animation $(document).ajaxStart(function(){ $("#loadingDiv").css("display","block"); }); $(document).ajaxComplete(function(){ $("#loadingDiv").css("display","none"); });
每当ajax调用启动时都会调用ajaxStart; 完成相同的调用时调用ajaxComplete。
5）如果您不想在首次加载页面时看到微调器，请确保在css文件中添加以下内容：
#loadingDiv{ display:none; }
jQuery load（）方法有一个回调函数，你可以获得xhr状态。 使用spin.js加载程序（或任何其他加载指示符），您可以显示，然后在.load（）完成时隐藏。 注意：此示例将给出404，因为加载的文件不存在，但微调器加载指示器的工作方式相同。
// create gloabal page spinner for loading stuff var opts = { lines: 13, // The number of lines to draw, length: 12, // The length of each line width: 4, // The line thickness radius: 15, // The radius of the inner circle scale: .5, // Scales overall size of the spinner corners: 1, // Corner roundness (0..1) color: '#000', // #rgb or #rrggbb or array of colors opacity: 0.25, // Opacity of the lines rotate: 0, // The rotation offset direction: 1, // 1: clockwise, -1: counterclockwise speed: 1, // Rounds per second trail: 60, // Afterglow percentage fps: 20, // Frames per second when using setTimeout() as a fallback for CSS zIndex: 2e9, // The z-index (defaults to 2000000000) className: 'spinner', // The CSS class to assign to the spinner top: '50%', // Top position relative to parent left: '50%', // Left position relative to parent shadow: false, // Whether to render a shadow hwaccel: false, // Whether to use hardware acceleration position: 'absolute', // Element positioning } var spinner = new Spinner(opts).spin(); var target = $("#loader").append(spinner.el); $("#result").load("ajax/test.html", function(response, status, xhr) { if (status == "error") { var msg = "Sorry but there was an error: "; $("#result").html(msg + xhr.status + " " + xhr.statusText); } // remove loader $("#loader").empty(); });