javascript - 如何使用 jQuery 检查图像是否加载？

Question

我的页面上有一个基本的图像元素。我正在捕获它的加载事件以将消息记录到我的控制台。

$("#myImg").on('load', function() {
    console.log("Loaded");
});

上面的代码工作得很好，除非正在加载的图像已经存在于用户缓存中，在这种情况下根本不会加载消息。

是否有类似 loaded 的事件检查图像是否已加载？

Answer 1

Check imageObj.complete before load event. complete is image object property.

HTMLImageElement.complete : 如果浏览器已完成获取图像，则返回 true 的 bool 值，无论成功与否。如果图像没有 src 值，它也会显示 true。

var elem = $("#myImg");

if (!elem.prop('complete')) {
  console.log("Waiting to be loaded!");
  elem.on('load', function() {
    console.log("Loaded!");
    console.log(this.complete);
  });
} else {
  console.log("Already loaded!");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img src='http://www.wired.com/wp-content/uploads/2015/09/google-logo.jpg' id='myImg'>