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

您可以使用负载的完整的情况下，更多了here。

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