Question

我将图片附加到这样的div：

$('#content_div').append('<img src="/images/default_pic.jpg" />')

发生这种情况时，会有轻微延迟，然后图像开始加载。我希望在稍微延迟期间显示加载gif（在同一content_div中），然后在图像开始加载时会立即消失。我知道如何选择和删除加载gif，但是我绑定删除代码的哪个事件，以便在图像开始加载时运行它？

编辑：图像添加代码多次运行，因此content_div最终会显示多个图像。

Answer 1

也许是这样的：

function showLoading() {
   ...
}

function hideLoading() {
   ...
}

...
showLoading();
$("<img>")
  .bind("load error", hideLoading)
  .attr("src", "/images/default_pic.jpg")
  .appendTo('#content_div');
...

Answer 2

    $("#content_div").html("<img src='ajax-loader.gif' />");
    $("#content_div").empty();
    $('#content_div').append('<img src="/images/default_pic.jpg" />');

那好吗？它会在图像准备好之前显示一个加载器

如何在附加图像开始加载后立即运行jQuery代码？

2 个答案: