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

Answer 1

差异可能微不足道，但我个人只会更新src 属性：

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

另一种方法是创建如下标记：

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

在Div中编辑图片'src'vs替换'img'标签？

1 个答案: