如何启用图像加载并使用javascript禁用图像加载

Question

我有这个javascript函数。 我想在div加载时显示图像加载。 并在加载div或出现错误时将loadking图像设置为null：

照原样，加载图像一直显示在页面上，您有什么想法在这里遗漏吗？

$(document).ready(function(){

  $("#submitbutton").on("click", function(){
    //disable the button to prevent multiple clicks
    $("#submitbutton").attr("disabled", "disabled");
    $('#loading').html('<img src="img/loading.gif"> loading...');

    var vcenter = $("#v_name").val();

    vcenter = "'"+vcenter+"'";


    var req = ocpu.rpc("output1", {
      vcenter : vcenter

    }, function(output){

      var data=output;

      });

      req.fail(function(){
        alert("Server error: " + req.responseText);
        $('#loading').html();
      });

      //after request complete, re-enable the button 
      req.always(function(){
        $("#submitbutton").removeAttr("disabled");
         $('#loading').html();
      });

    });
  });

html代码：

<button id="submitbutton" type="button">Submit</button>
  <div id="loading"></div>

  <div id="output"> </div>

Answer 1

您需要清空它。

$('#loading').html('');

这就是您当前问题的解决方法。 但是我建议的是这样的：

    $(document).ajaxStart(function () {
        $('#loading').css('display', 'block');
    }).ajaxStop(function () {
        $('#loading').css('display', 'none');
    });

#loading div已经包含来自HTML的图像。