Call function on image load
<p>I'm using the jquery cycle plugin to create a simple slideshow with thumbnails.</p>

<p><a href="http://www.ttmt.org.uk/forum/slideshow/" rel="nofollow">http://www.ttmt.org.uk/forum/slideshow/</a></p>

<p>The thumbnails are in a sticky footer that stays at the bottom of the window.</p>

<p>I want the slideshow image to fill the rest of the window.</p>

<p>On the window resize I'm calling this function to resize the image</p>

<pre><code>function resizeImg() {
  $('#slideshow img').css({'height':$('#wrap').height()-footerHeight,'width':'auto'});
}
</code></pre>

<p>My problem is when the image first loads it doesn't fill the space and is it's original size.</p>

<p>How can I call the resizeImg function when the image loads.</p>

<pre><code>    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;Title of the document&lt;/title&gt;
      &lt;!--jQuery--&gt;
      &lt;script type="text/javascript" src="js/jquery1.7.2.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/cycle.js"&gt;&lt;/script&gt;
      &lt;!--CSS--&gt;

      &lt;style type="text/css"&gt;
        *{
          margin:0;
          padding:0;
        }
        ul{
          list-style:none;
        }
        /**/
        html, body {
            height:100%;
            text-align:center;
        }
        #wrap {
            margin:auto;
            min-height:100%;
            margin-top:-100px;
            text-align:left;
        }
        * html #wrap {
            height:100%
        }
        #header {
            background:red;
            border-top:100px solid #fff; 
        }
        #footer {
            background:#eee;
            margin:auto;
            height:100px;
            clear:both;
        }
        /**/
        #slideshow img{
          margin:0 0 0 55px;
          height:100%;
        }

        div#thumbWrap {
          position: relative;
          height: 100px;
          width: 500px;
          overflow: auto;
          margin:0 0 0 50px;
        }
        ul#thumbs {
          display: block;
          width: 2000px;
          padding: 15px 0 0 15px;
        }
        ul#thumbs li {
          display: block;
          float: left;
          padding: 0 4px;
        }
        ul#thumbs a {
          display: block;
          text-decoration: none;
        }
        ul#thumbs img {
          border: 3px #fff solid;
        }
        ul#thumbs a:hover img {
          opacity: 0.5;
        }
      &lt;/style&gt;

      &lt;/head&gt;

    &lt;body&gt;
      &lt;div id="wrap"&gt;
        &lt;div id="header"&gt;

        &lt;/div&gt;&lt;!-- #header --&gt;
        &lt;div id="slideshow"&gt;
          &lt;img src="images/01.jpg" alt="" /&gt;
          &lt;img src="images/02.jpg" alt="" /&gt;
          &lt;img src="images/03.jpg" alt="" /&gt;
          &lt;img src="images/04.jpg" alt="" /&gt;
          &lt;img src="images/05.jpg" alt="" /&gt;
          &lt;img src="images/01.jpg" alt="" /&gt;
          &lt;img src="images/02.jpg" alt="" /&gt;
          &lt;img src="images/03.jpg" alt="" /&gt;
          &lt;img src="images/04.jpg" alt="" /&gt;
          &lt;img src="images/05.jpg" alt="" /&gt;
        &lt;/div&gt;&lt;!-- #content --&gt;
      &lt;/div&gt;&lt;!-- #wrap --&gt;

      &lt;div id="footer"&gt;
          &lt;div id="thumbWrap"&gt;
            &lt;ul id="thumbs"&gt;

            &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;

      &lt;script type="text/javascript"&gt;

        $(window).load(function() { 

          $("#slideshow img").load(function () { 
            alert('here');
          })

          resizeImg();
          /*-cycle
          */
          $('#slideshow').cycle({ 
              fx:     'fade', 
              speed:  'fast', 
              timeout: 0, 
              pager:  '#thumbs', 
              before: resizeImg(),

              pagerAnchorBuilder: function(idx, slide) { 
                  return '&lt;li&gt;&lt;a href="#"&gt;&lt;img src="' + slide.src + '" width="auto" height="50" /&gt;&lt;/a&gt;&lt;/li&gt;'; 
              } 
          });
          /*-thumbnailScroll
          */
          var div = $('div#thumbWrap'), ul = $('ul#thumbs'), ulPadding = 15;
          var divWidth = div.width();
          div.css('overflow','hidden');
          var lastLi = ul.find('li:last-child');
          div.mousemove(function(e){   
            var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;        
            var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;         
            div.scrollLeft(left);         
          });

          var footerHeight = $('#footer').height();

          function resizeImg() {
            $('#slideshow img').css({'height':$('#wrap').height()-footerHeight,'width':'auto'});
          }

          $(window)
            .scroll(resizeImg)
            .resize(resizeImg)
            .onload(resizeImg)
        });

      &lt;/script&gt;

    &lt;/body&gt;

    &lt;/html&gt;
</code></pre>
