title: How can I determine if an image has loaded, using Javascript/jQuery?
body: <p>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.)</p>
  
  <p>So something like this would be in the HTML:</p>
  
  <pre><code>&lt;img id="photo"
       src="a_really_big_file.jpg"
       alt="this is some alt text"
       title="this is some title text" /&gt;
  </code></pre>
  
  <p><strong>Is there a way for me to determine if the <code>src</code> image in an <code>img</code> tag has been downloaded?</strong></p>
  
  <p>I need this because I'm running into a problem if <code>$(document).ready()</code> is executed before the browser has loaded the image.  <code>$("#photo").width()</code> and <code>$("#photo").height()</code> will return the size of the placeholder (the alt text).  In my case this is something like 134 x 20.</p>
  
  <p>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).</p>
  
  <hr>
  
  <p><strong>Edit:</strong> For anyone wanting to see the code:</p>
  
  <pre><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 &lt; 150)
      {
        REAL_WIDTH = $("#photo").width();
        REAL_HEIGHT = $("#photo").height();
        if(REAL_HEIGHT &lt; 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));
    }
  
  });
  </code></pre>
  
  <hr>
  
  <p><strong>Update</strong>: Thanks for the suggestions.  There is a risk of the event not being fired if I set a callback for the <code>$("#photo").load</code> 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:</p>
  
  <pre><code>&lt;img id="photo"
       onload="photoLoaded();"
       src="a_really_big_file.jpg"
       alt="this is some alt text"
       title="this is some title text" /&gt;
  </code></pre>
  
  <p>Then in Javascript:</p>
  
  <pre><code>//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 &lt; 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));
    }
  
  });
  </code></pre>