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

Question

我正在编写一些Javascript来调整大图像的大小，以适合用户的浏览器窗口。（不幸的是，我没有控制源图像的大小。）因此，HTML中将包含以下内容：<img id="photo"     src="a_really_big_file.jpg"     alt="this is some alt text"     title="this is some title text" />我是否可以确定标签中的src图像img是否已下载？我需要这样做，因为如果$(document).ready()在浏览器加载图像之前执行该命令，就会遇到问题。  $("#photo").width()并$("#photo").height()返回占位符的大小（替代文本）。就我而言，这大约是134 x 20。现在，我只是在检查照片的高度是否小于150，并假设是alt文字。但这是一个很不错的技巧，如果照片的高度小于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事件设置回调，则可能会引发该事件，因此我直接在image标签上定义了onLoad事件。作为记录，下面是我最终使用的代码：<img id="photo"     onload="photoLoaded();"     src="a_really_big_file.jpg"     alt="this is some alt text"     title="this is some title text" />然后在Javascript中：//This must be outside $() because it may get called firstvar 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;    }  }});

Answer 1

使用jQuery数据存储，您可以定义“已加载”状态。

<img id="myimage" onload="$(this).data('loaded', 'loaded');" src="lolcats.jpg" />

然后在其他地方您可以执行以下操作：

if ($('#myimage').data('loaded')) {

    // loaded, so do stuff

}