jQuery或Javascript检查是否加载了图像

我知道Stackoverflow上有很多这样的功能，但在jquery的最新版本（1.10.2）中，我还没有找到一个适合我的

我确实试过：

$（“.lazy”）.load（函数（）{}

但我相信经过一些研究后，使用

.load

检测图像加载在jQuery 1.8中是不可取的。我需要做的是在加载图像后启动图像调整功能。我无法控制图像的大小 现在我必须通过jQuery添加图像维度，在页面加载后附加一个属性（通过

.attr（）

），这样我就可以使用LazyLoadJS了

问题是，我需要一种准确的方法来延迟所有的脚本，直到图像正确加载为止，否则函数有时会在每个图像加载之前触发。我尝试过使用

$（window）.load（function（）{}）；

，但有时在每个图像加载之前它仍会触发。

我通常这样做：

var image = new Image();
image.onload = function () {
   console.info("Image loaded !");
   //do something...
}
image.onerror = function () {
   console.error("Cannot load image");
   //do something else...
}
image.src = "/images/blah/foo.jpg";

请记住，加载是异步的，因此必须在onload和onerror事件中继续脚本

我需要做的是在加载图像后启动图像调整功能

是否确实需要加载图像？在调整图像大小之前等待加载图像可能会导致页面布局大幅跳转，尤其是当图像具有较大的文件大小（如动画GIF）时

通常，对于图像大小调整，您只需要知道图像的内在尺寸。虽然没有事件告诉您这一点，但很容易轮询图像以获取数据。类似的方法可能特别有效：

<img src="..." data-resizeme="123" />

---

希望这有帮助！

我会为需要此约束的图像提供一个类，如

mustLoad

，其中：

<img class="mustLoad" src="..." alt="" />

编辑：

---

作为对您在上文中有关弃用

.load（）

的评论的回应，

.load（）

被弃用，取而代之的是（'load'）上的

在

onLoad

事件和Ajax加载之间。

还有一个有用的

。如果在附加任何事件侦听器之前，您已经设置了
的
.src
图像对象的
属性，则可以使用它：

var img=document.getElementById('myimg');
var func=function(){
    // do your code here
    // `this` refers to the img object
};
if(img.complete){ 
    func.call(img);
}
else{ 
    img.onload=func; 
}

参考：
在等待加载多个图像的情况下：

var images = $("#div-with-images img");
var unloaded = images.length;
images.on('load', function(){
  -- unloaded;
  if (!unloaded) {
    // here all images loaded, do your stuff
  }
});

你确定
$（window.load（）
？我从来没有遇到过这个问题，从jQuery文档中可以看到：“当页面完全加载时运行一个函数，包括图形。”你可以使用$（document）ready（）检查DOM是否准备就绪；我将重新运行测试，并再次检查我对window.load的看法是否正确“但我相信，经过一些研究，jQuery1.8中对这一点进行了贬低"什么应该被弃用？更新问题。我的意思是我认为。加载以检测图像加载不起作用，因为1.8如果我加载一个大的图像列表，我认为我需要引用所有图像路径？嗯，这取决于你的想法。如果进程需要在开始之前加载所有图像，那么是的，你必须加载所有图像。我如果我的列表是动态的，我可以创建一个变量来查看所有传入图像的src属性，然后以这种方式应用它？是的，绝对可以。静态数组只是一个示例，您可以在启动之前读取所有src，然后启动预加载函数。data resizeme=“123”-特别是123，我希望它的大小是多少？你可以这样做。在
resizeImage
函数中，使用
parseInt（this.getAttribute（“数据大小”），10）
获取值，然后应用它。关键是在那里有一个属性。使用它的目的由您决定。使用setInterval生成轮询函数非常糟糕，这是管理异步函数最糟糕的方法，而不是使用回调系统。@DarkoRomanov Erm…您如何建议对没有属性的对象进行轮询关联的事件处理程序？事件是图像DOM对象的onload，您只需要一个包含每个图像url的数组和指向当前图像的简单指针。当图像完成加载后，您再次调用相同的加载函数，增加指针。请看Fiddle，这正是我捕获加载图像结尾所需的通过
$（xx）.html（）调用
var images = $("#div-with-images img");
var unloaded = images.length;
images.on('load', function(){
  -- unloaded;
  if (!unloaded) {
    // here all images loaded, do your stuff
  }
});