javascript - 如何使用 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 的图像。