如何使用 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" />

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

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 事件.作为记录，这是我最终使用的代码:

---

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屋！