jquery - 向 jquery ajax .load() 添加加载动画

Question

我目前有这个代码，它很简单

$('#window').load('http://mysite.com/mypage.php');

但它仅在完全加载后才显示内容，并且在此期间#windows 元素保持为空。我想在页面加载之前显示加载图像。我该怎么做？jquery 网站对此一无所知。（AFAIK）

Answer 1

首先创建一个loadingdiv。

 <div id='loadingDiv'>
    Please wait...  <img src='path to your super fancy spinner' />
 </div> 

---

最初隐藏此 DIV 并附加代码以在 ajaxCall 启动时显示此 div 并在 ajax 调用完成时隐藏此。

$('#loadingDiv').hide().ajaxStart( function() {
$(this).show();  // show Loading Div
} ).ajaxStop ( function(){
$(this).hide(); // hide loading div
});

编辑
不久前，SO 格式化标签存在一些问题。又加了那些。

Answer 2

为此，您必须使用 gif 图像。首先将#window的html改成gif图片，直到内容加载完毕

工作代码

$('#window').html("<img src="image_url" />").load('http://mysite.com/mypage.php');

Answer 3

对于我知道可能需要超过几毫秒的异步请求，我使用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的更新）

Answer 4

1) 转到cssload.net并配置一个带有形状、颜色、速度和大小的微调器。下载代码。

2）将样式代码放入css文件

3）将div代码放入你的html文件中，如：

<div id="loadingDiv">
        Please wait...
        <div id="spinnerDiv">
            <div id="blockG_1" class="facebook_blockG">
            </div>
            <div id="blockG_2" class="facebook_blockG">
            </div>
            <div id="blockG_3" class="facebook_blockG">
            </div>
        </div>
    </div>

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

ajaxStart 会在 ajax 调用开始时被调用；当相同的调用完成时调用 ajaxComplete。

5) 如果您不想在页面首次加载时看到微调器，请确保在您的 css 文件中添加以下内容：

#loadingDiv{
display:none;
}

Answer 5

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

<script src="http://fgnass.github.io/spin.js/spin.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loader">
</div>
<div id="result">
</div>