Question

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

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

上述代码完全正常，除非正在加载的图像已经存在于用户缓存中，在这种情况下根本不会加载该邮件。

是否有loaded等事件来检查图像是否已加载？

Answer 1

在imageObj.complete事件之前检查load。 complete是图像对象属性。

HTMLImageElement.complete：返回一个布尔值，如果浏览器已完成提取图像，则为true，无论是否成功。如果图像没有src值，它也会显示为真。

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'>

Answer 2

您可以将随机数作为版本添加到图像中。所以每次它都会加载图像而不是从页面重新加载的缓存中获取它。

var randNum = Math.random();
var imageSource= "../include/images/image.png?v="+randNum ;

将imageSource分配给img标记的src属性。

如何检查图像是否加载了jQuery？

2 个答案: