代码之家  ›  专栏  ›  技术社区  ›  leora Matt Lacey

如何在Ajax调用期间用加载图像替换TD中的图像

  •  1
  • leora Matt Lacey  · 技术社区  · 14 年前

    我有一个HTML表。每个单元格中都有一个图像,后面跟着一些文本。像这样:

    <td>
      <img src='image.gif'>This is a test
    </td>
    

    我必须运行jquery-ajax调用,在这个调用期间,我想将图像更改为我拥有的加载图像(loading.gif),然后在ajax完成后将其返回到常规图像(本例中为image.gif)。

    正确的jquery语法是什么,可以将图像更改为加载图像并再次返回?

    2 回复  |  直到 14 年前
        1
  •  5
  •   John Hartsock    14 年前

    我相信您的问题是如何在Ajax请求之前更改图像,然后在Ajax请求完成后再更改图像。

    下面是一个例子……这里有一些关于 jQuery ajax() method . 注意:ajax()方法包含声明成功、错误和完成函数的选项,这些选项可以在ajax调用成功、出错或完成(即成功或错误之后)时执行。

    <td>
      <img id="loadingImg" src='image.gif'>This is a test
    </td>
    

    $("#loadingImg").attr("src", "loading.gif");
    $.ajax({ //other options here
      complete: function () {
      $("#loadingImg").attr("src", "image.gif");  // change image back when ajax request is complete
    } });
    
        2
  •  3
  •   David Thomas    14 年前

    更改图像相对容易:

    $('img[src="image.gif"]').attr('src','path/to/new/image.png');
    

    如果您的图像 id ( $('#imageIDname') ,这只适用于 图像元素)或 class ( $('.imageClassName') 尽管这适用于 全部的 类名称的图像)。我不知道你是否想把这个应用到 全部的 全部图像 td 或者只是一个特定的 img 元素。

    将它与Ajax调用耦合起来有点棘手,因为我不知道Ajax调用是什么样子的。

    而且,这可能只是我的强迫症,你的元素应该是:

    <img src='image.gif' />This is a test
    

    注意尾部 / IMG 标签。