Question

我想制作一张图片，显示下载过程正在进行中以完成带来Page（2014.php）如wait.gif：

我的示例代码无效!!!!我需要等待图像直到页面加载...我的页面（2014.php）在这几分钟需要几分钟我需要等待图像

$('#data').load('test.php');

示例：

<button>Click</button>
<div id="data"></div>

<script>
$(document).ready(function(){
 $('button').click(function(){
  $('#data').html('<img src="wait.gif" />');
  jQuery.ajax({
   url: "2014.php",
   success:function(data){$('#data').html(data);}
  });
 });
});
</script>

Answer 1

如果您正在寻找＆＃34; loading＆＃34;用于创建加载图像的生成器，有许多在线免费服务，例如：

http://www.loading.io
http://www.ajaxload.info
http://preloaders.net

我只是用谷歌搜索＃34; Ajax加载器＆＃34;。

只需选择一个设计，设置其他一些选项（可选），最后为您生成gif动画。

希望它有所帮助！

Answer 2

首先，将图像放在页面上，然后用CSS隐藏它，在希望它显示时显示它，并在完成AJAX查询时隐藏它：

HTML：

<button>Click</button>
<img src="wait.gif" class="imgWait" />
<div id="data"></div>

CSS：

.imgWait {
    display: none;
}

使用Javascript：

<script>
    $(document).ready(function(){

        var $imgWait = $(".imgWait");  //cache your img reference in a variable

        $('button').click(function(){
            $imgWait.show(); //show the waiting image

            jQuery.ajax({
                url: "2014.php",
                success:function(data){
                    $('#data').html(data);
                    $imgWait.hide(); //hide the waiting image after success
                }
            });
        });
    });
</script>

如何在完成加载之前创建一个图像，AJAX jQuery

2 个答案: