如何检查图像是否使用 jQuery 加载？ [复制]答案

【问题标题】：How to check if an image is loaded with jQuery? [duplicate]如何检查图像是否使用 jQuery 加载？ [复制]
【发布时间】：2016-07-18 01:58:01
【问题描述】：

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

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

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

是否有loaded之类的事件来检查图片是否已经加载？

【问题讨论】：

在load之前使用imageObj.complete

标签： javascript jquery

【解决方案1】：

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

HTMLImageElement.complete : 如果浏览器已完成获取图像，则返回一个布尔值，无论成功与否。如果图像没有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'>

【讨论】：

elem.prop('complete') 会返回 true，即使图像未缓存
证明你的陈述..
当您需要等到所有图像加载到滑块中时，它就像一个魅力！谷歌给我的最佳答案。谢谢@Rayon！

【解决方案2】：

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

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

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

【讨论】：