jquery - 编辑图像 'src' 与替换 Div 中的 'img' 标签？

Question

    var rightnow=0; var highone=8;
$(document).ready(function(){
  $("#next-img").click(function(){
    rightnow=rightnow+1; if (rightnow>highone) {rightnow=1;}; 
    $(".img-class").attr('src',"http://example.com/images/abc_"+rightnow+".jpg");
    startTime = new Date().getTime();
  });
});

function doneLoading() {
    var loadtime1 = new Date().getTime() - startTime;
    $("#stats span").html(loadtime1);

<img class="img-class" height="300" src="" onload="doneLoading()"/>

我正在使用此代码在屏幕上显示图像。每次单击“下一个”按钮时，都会更改 img 标签的“src”以显示下一个图像。所以包含图像的 div 永远不会变空。didLoading() 函数帮助我计算图像加载的时间。上一个图像保留在屏幕上，直到加载下一个图像(窗口不会变为空白)。现在我希望添加这些功能:

1) 单击“下一个”时，在加载下一个图像时淡出或删除当前图像。

2) 在加载下一个图像时显示加载指示器。

3) 继续显示图片加载时间。

我的问题:

我应该尝试构建我目前的方法还是应该使用类似的方法:

    $("#next-img").click(function() {
      $("#imageBox").html("<img src=' + this.href + '>");
});

或者这个...

    $("#next-img").click(function() {
      $("#imageBox").html($("<img>").attr("src", this.href));
});

如果有人能够强调一种方法相对于另一种方法的优势，那就太好了。对我来说，.load 和 .html 方法可能是我应该做的，但我正在寻求专家的意见。

Answer 1

差异可能可以忽略不计，但我个人只会更新 src 属性:

$(".img-class").prop('src', 'http://example.org/...');

另一种方法是创建这样的标签:

var $img = $('<img>', {
    src: this.href
});
$("#imageBox").html($img);