0

私は画像を持っています：

<img src="http://localhost/image1.jpg" id="myImage" />

それから私はjavascriptを持っています：

function event() {
   $("#myImage").attr("src", "http://localhost/image2.jpg");
}

画像の読み込みが完了していないときに「読み込み中」という言葉を表示したいと思います。image2.jpgの読み込みが完了したことを検出して、画像を目的の画像に変更するにはどうすればよいですか。私は次のようなことを考えていました：

function event() {
   $("#myImage").hide();
   $("#loadingBlock").show();
   if ( hasLoaded("http://localhost/image2.jpg") ) {
     $("#myImage").attr("src", "http://localhost/image2.jpg");
     $("#loadingBlock").hide();
     $("#myImage").show();
   }
}

「hasLoaded」関数はどのように機能しますか？

4

3 に答える 3

2 
$("#myImage")
        .load(function() { console.log("image loaded correctly");
         //your code to show image..
        })
        .error(function() { console.log("error loading image"); });
于 2013-03-26T09:16:04.853 に答える
1

loadイベントにハンドラーをバインドできます：

$("#loadingBlock").show();
$("#myImage")
   .hide()
   .load(function() { 
      $("#loadingBlock").hide();
      $(this).show();
   })
   .prop("src", "http://localhost/image2.jpg");
于 2013-03-26T09:14:55.550 に答える
0

ロードの完全なイベントを使用できます。詳細については、こちらをご覧ください。

$("#myImage").load("http://localhost/image2.jpg", function(){
   alert("loaded");
});
于 2013-03-26T09:15:15.490 に答える