jquery fire event when element is shown
<p>I need to fire an event on the following conditions for an image:</p>

<p>1) The image has been loaded (the following function takes care of that)
2) The image is shown. (if the image has not been shown yet, height() and width() return zero, meaning I cannot resize the image.</p>

<p>The main problem here is that my image has been loaded into the child of a hidden div. Since it is a child of the hidden div, change() will not work.</p>

<p>Here is the function I am currently using:</p>

<pre><code> //Takes the number of pixesl to resize the x-axis of the image to
 $.fn.resizeImage = function(newX) {
    return this.each(function() {
        $this = $(this);
        //The load event is defined via plugin and takes care of the problem of the load event 
        //not firing for elements that have been cached by the browser.
        $this.bind('load', function(){
            var y = $this.height();
            var x = $this.width();

            //return if image does not for some reason
            if(x == 0 || y == 0){return;}

            //alert('y: ' + y + ' x: ' + x);
            var ratio = y / x;
            var newY = Math.floor(newX * ratio);
            $this.height(newY);
            $this.width(newX);
        });
    });
 };
</code></pre>
