Question

我目前有这段代码而且非常简单

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

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

Answer 1

首先创建一个loading div。

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

每当ajax调用开始时都会调用ajaxStart; 完成相同的调用后调用ajaxComplete。

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

#loadingDiv{
display:none;
}

Answer 5

jQuery load（）方法有一个回调函数，你可以在其中获得xhr状态。使用spin.js加载程序（或任何其他加载指示符），您可以显示，然后在.load（）完成时隐藏。注意：此示例将提供404，因为加载的文件不存在，但微调器加载指示器的工作方式相同。

＆＃13;

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

＆＃13;

<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>

＆＃13;

添加加载动画到jquery ajax .load（）

5 个答案: