如何使用Javascript / jQuery确定图像是否已加载？ [英] How can I determine if an image has loaded, using Javascript/jQuery?

问题描述

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

I'm writing some Javascript to resize the large image to fit into the user's browser window. (I don't control the size of the source images unfortunately.)

所以这样的内容将出现在HTML中：

So something like this would be in the HTML:

<img id="photo"
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

我有办法确定 src 已下载 img 标记中的图片？

Is there a way for me to determine if the src image in an img tag has been downloaded?

我需要这个因为如果在浏览器加载图像之前执行 $（document）.ready（），我就遇到了问题。 $（＃photo）。width（）和 $（＃photo）。height（）将返回占位符的大小（替代文本）。在我的情况下，这是像134 x 20。

I need this because I'm running into a problem if $(document).ready() is executed before the browser has loaded the image. $("#photo").width() and $("#photo").height() will return the size of the placeholder (the alt text). In my case this is something like 134 x 20.

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

Right now I'm just checking if the photo's height is less than 150, and assuming that if so it is just alt text. But this is quite a hack, and it would break if a photo is less than 150 pixels tall (not likely in my particular case), or if the alt text is more than 150 pixels tall (could possibly happen on a small browser window).

编辑：对于想要查看代码的人：

For anyone wanting to see the code:

$(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上定义了一个onLoad事件图片标签。为了记录，这里是我最终得到的代码：

---

Update: Thanks for the suggestions. There is a risk of the event not being fired if I set a callback for the $("#photo").load event, so I have defined an onLoad event directly on the image tag. For the record, here is the code I ended up going with:

<img id="photo"
     onload="photoLoaded();"
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

然后在Javascript中：

Then in 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));
  }

});

推荐答案

添加事件监听器，或者让图像公布本身与onload。然后从那里找出尺寸。

Either add an event listener, or have the image announce itself with onload. Then figure out the dimensions from there.

<img id="photo"
     onload='loaded(this.id)'
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

这篇关于如何使用Javascript / jQuery确定图像是否已加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！