如何使用Javascript/jQuery确定图像是否已加载？

我正在编写一些Javascript来调整大图像的大小以适应用户的浏览器窗口.(遗憾的是,我无法控制源图像的大小.)

所以类似这样的东西将在HTML中:

有没有办法让我确定标签中的src图像img是否已下载？

我需要这个,因为如果$(document).ready()在浏览器加载图像之前执行,我遇到了问题. $("#photo").width()并且$("#photo").height()将返回占位符(alt文本)的大小.在我的情况下,这是像134 x 20.

现在我只是检查照片的高度是否小于150,并假设如果是这样,它只是替代文字.但这是一个非常黑客,如果一张照片的高度低于150像素(在我的特定情况下不太可能),或者如果替代文字高度超过150像素(可能发生在小型浏览器窗口上),它就会破裂.

---

编辑:对于想要查看代码的任何人:

$(function()
{
  var REAL_WIDTH = $("#photo").width();
  var REAL_HEIGHT = $("#photo").height();

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()
  {
    if(REAL_HEIGHT < 150)
    {
      REAL_WIDTH = $("#photo").width();
      REAL_HEIGHT = $("#photo").height();
      if(REAL_HEIGHT < 150)
      {
        //image not loaded.. try again in a quarter-second
        setTimeout(adjust_photo_size, 250);
        return;
      }
    }

    var new_width = . . . ;
    var new_height = . . . ;

    $("#photo").width(Math.round(new_width));
    $("#photo").height(Math.round(new_height));
  }

});

---

更新:感谢您的建议.如果我为$("#photo").load事件设置回调,则存在未触发事件的风险,因此我直接在图像标记上定义了onLoad事件.为了记录,这是我最终得到的代码:

然后在Javascript中:

//This must be outside $() because it may get called first
var isPhotoLoaded = false;
function photoLoaded()
{
  isPhotoLoaded = true;
}

$(function()
{
  //Hides scrollbars, so we can resize properly.  Set with JS instead of
  //  CSS so that page doesn't break with JS disabled.
  $("body").css("overflow", "hidden");

  var REAL_WIDTH = -1;
  var REAL_HEIGHT = -1;

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()
  {
    if(!isPhotoLoaded)
    {
      //image not loaded.. try again in a quarter-second
      setTimeout(adjust_photo_size, 250);
      return;
    }
    else if(REAL_WIDTH < 0)
    {
      //first time in this function since photo loaded
      REAL_WIDTH = $("#photo").width();
      REAL_HEIGHT = $("#photo").height();
    }

    var new_width = . . . ;
    var new_height = . . . ;

    $("#photo").width(Math.round(new_width));
    $("#photo").height(Math.round(new_height));
  }

});

Diodeus - Ja.. 32

添加事件侦听器,或让图像通过onload声明自己.然后从那里找出尺寸.

不鼓励混乱的行为和内容.应使用Javascript应用事件,而不是HTML. (9认同)

他的评论是相关的,因为我们没有被困在2008年.人们仍然读到这一点,即使它在08年被认为是不好的做法,你也不希望人们现在想好它的好习惯. (9认同)

document.querySelector("img").addEventListener("load",function(){alert('onload!');}); (3认同)

---

Mike Fogel.. 14

使用jquery数据存储,您可以定义"已加载"状态.

然后你可以做其他地方:

if ($('#myimage').data('loaded')) {
    // loaded, so do stuff
}

使用`jQuery(this)`代替`$(this)`以更好地与其他库兼容(jquery不拥有$),尤其是当你在html中使用JavaScript时. (2认同)

---

Evan Carroll.. 9

正确的答案是使用event.special.load

如果从浏览器缓存加载图像,则可能不会触发加载事件.为了解释这种可能性,我们可以使用特殊的加载事件,如果图像准备就会立即触发.event.special.load目前作为插件提供.

根据.load()上的文档

1> Diodeus - Ja..：

---

添加事件侦听器,或让图像通过onload声明自己.然后从那里找出尺寸.

---

不鼓励混乱的行为和内容.应使用Javascript应用事件,而不是HTML.

---

他的评论是相关的,因为我们没有被困在2008年.人们仍然读到这一点,即使它在08年被认为是不好的做法,你也不希望人们现在想好它的好习惯.

---

document.querySelector("img").addEventListener("load",function(){alert('onload!');});

2> Mike Fogel..：

---

使用jquery数据存储,您可以定义"已加载"状态.

然后你可以做其他地方:

if ($('#myimage').data('loaded')) {
    // loaded, so do stuff
}

---

使用`jQuery(this)`代替`$(this)`以更好地与其他库兼容(jquery不拥有$),尤其是当你在html中使用JavaScript时.

3> Evan Carroll..：

---

正确的答案是使用event.special.load

如果从浏览器缓存加载图像,则可能不会触发加载事件.为了解释这种可能性,我们可以使用特殊的加载事件,如果图像准备就会立即触发.event.special.load目前作为插件提供.

根据.load()上的文档

---

我打算用这样的建议添加一个答案,很高兴我在编码之前看到了这个答案.基本上,您的处理程序需要在设置处理程序之前首先检查图像是否已加载.如果已加载,则立即触发回调.这就是`$ .ready`的作用.我打算建议只检查宽度,但这有问题,我真的很喜欢这个解决方案.

4> Andrew Bullo..：

---

你想做Allain所说的,但要注意有时图像在dom准备好之前加载,这意味着你的加载处理程序不会触发.最好的方法是按照Allain的说法进行操作,但在附加加载程序后用javascript设置图像的src.这样你就可以保证它会发射.

在可访问性方面,您的网站是否仍适用于没有javascript的用户？你可能想给img标签正确的s​​rc,附上你的dom ready处理程序来运行你的js:清除图像src(用css给它一个固定的和高度以防止页面闪烁),然后设置你的img加载处理程序,然后将src重置为正确的文件.这样你覆盖所有基地:)