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

【问题标题】：Javascript: Detect if an image that has been set as SRC has finished loading?Javascript：检测已设置为 SRC 的图像是否已完成加载？
【发布时间】：2013-03-26 17:44:00
【问题描述】：

我有一张图片：

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

【问题讨论】：

标签： jquery

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以使用完整的加载事件，请阅读here。

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

【讨论】：