Question

我无法在获取数据之前找到加载图片的方法。实际上我想做的是：

点击按钮
显示加载图片
2秒后加载图像应该消失
图像显示后显示我的文字

这是我的代码。我改变了很多次，以至于我不知道是否仍然很好

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="libreria/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("input[name=campo1]").click(function(){
                function imagen(){
                    $("#imagen").css("display", "block") ;
                    setTimeout(imagen, 2000);
                }

                var ajax = $.ajax({
                    type: "GET",
                    url : 'datos.txt',
                    /*beforeSend: function(){
                    });*/
                });

                ajax.done(function(data){            
                    $("div").html(data);
                });

                ajax.fail(function(data){
                    alert("No se ha podido cargar el archivo");
                });
            });
        });         
    </script>
</head>
<body>
    <div>
        <img id="imagen" src="images/loader.gif" style="display:none"> 
    </div> 
    <input type="button" name="campo1" value="Traer fichero de texto"/>
</body>
</html>

Answer 1

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="libreria/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("input[name=campo1]").click(function(){
                $("#imagen").show();
                var ajax = $.ajax({
                              type: "GET",
                              url : 'datos.txt',
                              success : function(data){
                                    $("#imagen").hide();
                                    $("div").html(data);
                              },
                              error: function(){
                                    $("#imagen").hide();
                                    alert("No se ha podido cargar el archivo");
                              }
                           });
            });
        });         
    </script>
</head>
<body>
    <div>
        <img id="imagen" src="images/loader.gif" style="display:none"> 
    </div> 
    <input type="button" name="campo1" value="Traer fichero de texto"/>
</body>

</html>

通过执行此操作，您的加载程序图像将在您进行ajax调用之前显示，并在完成后消失。如果发生了错误，例如。呼叫失败：显示警报！

修改如果你真的希望加载图片在2秒后消失，你可以删除所有$("#imagen").hide()，并在$("#imagen").show()之后粘贴它。但我会劝你不这样做，因为ajax请求可能需要相当长的时间！

$("#imagen").show(); setTimeout(function(){ $("#imagen").hide(); },2000); var ajax = $.ajax({ type: "GET", url : 'datos.txt', success : function(data){ $("div").html(data); }, error: function(){ alert("No se ha podido cargar el archivo"); } });

另外一个问题，可能是您的遗言之一是您正在用加载的内容替换图像。由于图像与您放置数据的div相同。尝试使用$("div").append(data)代替.html(data)或将图片移到div之外。

Answer 2

执行此操作的最佳方法是显示加载图像onclick并在调用成功时隐藏加载图像，而不是超时。

以下是一个例子：

$("button").click(function(){
  // Show the spinner after the user clicks
  $("#imagen").show();

  $.ajax({url:"datos.txt",success:function(result){
    // Hide the spinner on success of the call
    $("#imagen").hide();
    // Put the returned data into your element
    $("div").html(result);
  }});
});

您不希望为微调器使用计时器，因为有时异步调用可能需要很长时间。您希望显示负载实际持续时间的加载指示器。

我希望这是有道理的。

如何在单击按钮并使用ajax获取数据后使用jquery加载图像？

2 个答案: