等待 AJAX 回调时更改图像 src：仅适用于 Firefox

Question

我有一个 JavaScript / jQuery 函数，当我单击页面上的按钮时会执行该函数。我在页面上也有一个<img> (id="P34_DOWNLOAD_STATUS_ICON")，它的源最初设置为服务器上图像目录中名为“magnifying_glass.png”的文件。 该函数启动 AJAX 回调并解析其响应。响应成功后，我的状态img的src改成icon_ok.png，万一出错改成icon_err.png。到目前为止一切顺利。

我还想在执行 AJAX 调用之前将 img 源更改为 GIF，以便用户看到正在发生的事情。这是有问题的部分：在 Firefox 中，一切都按预期工作，但在我尝试过的任何其他浏览器（Chrome 44、IE 11、Opera 30）中，加载 GIF 都没有显示。

代码如下：

function f_getFileFromURL(){

  var IMG_PATH = "<path to images directory>";
  var ICO_LOAD = IMG_PATH + "loading.gif";
  var ICO_ERR = IMG_PATH + "icon_err.png";
  var ICO_OK = IMG_PATH + "icon_ok.png";
  var ICO_SEARCH = IMG_PATH + "magnifying_glass.png";  

  var statusIcon = $("#P34_DOWNLOAD_STATUS_ICON").get(0);

  var url = $v("P34_URL");
  var pPageSubmissionId = $v("pPageSubmissionId");


  try{
    /*Set icon to loading GIF */ 
    statusIcon.src = ICO_LOAD;
    /* also tried this: */
    /*document.getElementById("P34_DOWNLOAD_STATUS_ICON").src = ICO_LOAD;*/


    /*Start AJAX callback */ 
    var responseString = f_execProcess("FETCH_FILE_FROM_WEB", [url,pPageSubmissionId]);
    var responseObj = jQuery.parseJSON(responseString)

    if (responseObj.responseCode == 0){
      /*Call was successful*/ 
      statusIcon.src = ICO_OK;


    }else{
      statusIcon.src = ICO_ERR;
      alert('Error downloading file:"' + responseObj.errorMsg + '"'); 
    }


  }catch(err){ 
    /*Set icon to loading GIF */ 
    statusIcon.src = ICO_ERR;  
    alert('Error downloading file:"' + err + '"'); 
  }
}

我注意到，如果我在执行 AJAX 调用后不将 img src 更改为 ICO_OK 或 ICO_ERR，则 GIF 会显示在每个浏览器中。我想这意味着在除 Firefox 之外的所有浏览器中，我都必须等到函数完成执行才能查看更改 img src 的效果。

关于如何让它在每个浏览器中工作的任何建议？感谢您的帮助。

Answer 1

我认为 statusIcon 是一个 jQuery 对象。所以你可以试试（如果 jQuery 版本 >1.9）

statusIcon.prop("src",src);

否则

statusIcon.attr("src",src);

Answer 2

打电话时会发生什么

var responseString = f_execProcess("FETCH_FILE_FROM_WEB", [url,pPageSubmissionId]);

它将异步调用您的 URL，因此不会等待队列中的下一个语句。为了防止在获取response 之前执行语句，您需要留在那里，所以使用async:false 或进行回调（在 ajax 成功函数中），这将更改您的图像源。

回调示例，

// function which will change img src, and it is your callback
function changeImgSource(responseString){
    var responseObj = jQuery.parseJSON(responseString);    
    if (responseObj.responseCode == 0){
      /*Call was successful*/ 
      jQuery(statusIcon).attr('src',ICO_OK);
    }else{
      jQuery(statusIcon).attr('src',ICO_ERR);
      alert('Error downloading file:"' + responseObj.errorMsg + '"'); 
    }
}

将 3 个参数作为回调传递

/*Start AJAX callback */ 
var responseString = f_execProcess("FETCH_FILE_FROM_WEB", [url,pPageSubmissionId],changeImgSource);

将此回调函数添加到您的ajax success function 中，

function f_execProcess(param_1,param_2,callback){
    jQuery.ajax({
        url:param_1,
        data:param_2,
        success:function(data){
            callback(data);
        }
    });
}

并尝试使用attr() 来更改 src 之类的，

jQuery(statusIcon).attr('src',ICO_ERR);