jquery - Javascript：检测已设置为 SRC 的图像是否已完成加载？

Question

我有一张图片：

<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”函数如何工作？

Answer 1

$("#myImage")
        .load(function() { console.log("image loaded correctly");
         //your code to show image..
        })
        .error(function() { console.log("error loading image"); });

Answer 2

load您可以在事件上绑定处理程序：

$("#loadingBlock").show();
$("#myImage")
   .hide()
   .load(function() { 
      $("#loadingBlock").hide();
      $(this).show();
   })
   .prop("src", "http://localhost/image2.jpg");

Answer 3

您可以使用完整的加载事件，请在此处阅读更多内容。

$("#myImage").load("http://localhost/image2.jpg", function(){
   alert("loaded");
});