Resize images in Jquery keeping aspect ratio on load
<p>I am quite new to Jquery and i have the following problem.</p>

<p>I wrote a function to resize images while keeping the aspect ratio. I have some more "if" than needed in this version just to be more readable. The html structure is something like that.</p>

<pre><code>&lt;div class="post"&gt;
    &lt;div class="date"&gt;&lt;/div&gt;
    &lt;div class="thumbnail"&gt;
        &lt;img class="img-thumb" /&gt;
    &lt;/div&gt;
    &lt;div class="post-body"&gt;
        &lt;p&gt;...&lt;/p&gt;
        &lt;img /&gt;
        &lt;p&gt;...&lt;/p&gt;
    &lt;/div&gt;              
&lt;/div&gt;
</code></pre>

<p>For the resizing (i also center the image by adding some padding. I think i don't have a mistake to that part of the code.)</p>

<pre><code>$(window).load(function() {
    var parentWidth  = 250;//max width. In the real script i get the parent width inside the each but for the example a static value is ok
    var parentHeight = 196;//max height

    $('.img-thumb').each(function () {
        var img=$(this);
        var width  = img.width(); //image width
        var height = img.height(); //image height
            var aspect = width/height;
            var wide = width/parentWidth;
            var tall = height/parentHeight;

        if(width &gt; parentWidth) { 
                if (wide &gt; tall) { 
                    width  = parseInt(parentWidth,10);
                    height = parseInt(parentHeight/aspect,10);
                }
            }
            if(height &gt; parentHeight) {
                if (tall &gt; wide) {
                    height = parseInt(parentHeight,10);
                    width  = parseInt(parentWidth*aspect,10);
                }
            }
            margin_top  = parseInt((parentHeight - height) / 2,10);
            margin_left = parseInt((parentWidth  - width ) / 2,10);

            img.css({'margin-top' :margin_top  + 'px',
                     'margin-left':margin_left + 'px',
                        'height'     :height   + 'px',
                        'width'      :width    + 'px'
                        });
    });
});
</code></pre>

<p>And here is my problem. I don't understand exactly how the load works. I mean. This will work but only when all the images are loaded. But it has two problems. The first is that it has to wait for all to load and the second is that the user will see the resizing so i first have to hide the images and show them with show(). I can do it in css but this way when javascript is disabled they will still be hidden so i prefer to do it in jquery.</p>

<p>I could run a second .each before that one and hide them all but i guess going to the dom for a second time running an each for the same thing is not the best solution. So how the load works exactly?</p>

<p>If i do this for example:</p>

<pre><code>$('.img-thumb').each(function () {

    var parentWidth  = 250;//max width. In the real script i get the parent width inside the each but for the example a static value is ok
    var parentHeight = 196;//max height
    var img=$(this);
    img.hide();
    img.load(function() {
        var width  = img.width(); //image width
        var height = img.height(); //image height
            var aspect = width/height;
            var wide = width/parentWidth;
            var tall = height/parentHeight;

        if(width &gt; parentWidth) { 
                if (wide &gt; tall) { 
                    width  = parseInt(parentWidth,10);
                    height = parseInt(parentHeight/aspect,10);
                }
            }
            if(height &gt; parentHeight) {
                if (tall &gt; wide) {
                    height = parseInt(parentHeight,10);
                    width  = parseInt(parentWidth*aspect,10);
                }
            }
            margin_top  = parseInt((parentHeight - height) / 2,10);
            margin_left = parseInt((parentWidth  - width ) / 2,10);

            img.css({'margin-top' :margin_top  + 'px',
                     'margin-left':margin_left + 'px',
                        'height'     :height   + 'px',
                        'width'      :width    + 'px'
                        }).show();
    });
});
</code></pre>

<p>It doesn't work. I mean i can still see the resizing. I guess the reason is that the second part of the each loop will not executed before the first image is loaded. So how can i tell jquery to execute the outdise of the load code? Do i need two .each? </p>
