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");
});

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

3 个答案: