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 に答える