2 
    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 永远不会为空。doneLoading() 函数帮助我计算图像加载的时间。前一个图像会一直显示在屏幕上，直到下一个图像加载（窗口不会变为空白）。现在我正在寻找添加这些功能：

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 方法可能是我应该做的，但我正在寻找专家意见。

4

1 回答 1

0

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

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

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

var $img = $('<img>', {
    src: this.href
});
$("#imageBox").html($img);
于 2013-07-11T04:27:52.490 回答