How to make sure Images are loaded in a loop and in correct order
<p>I am loading images from remote server.
how do i make sure that all images are loaded in correct order</p>

<p>also how do i make sure the alert is called only when all images are loaded</p>

<p>the below code does not load the images in correct order  and calls the alert  before the images are loaded.</p>

<pre><code>$(window).load(function () {
  $('.fancybox').each(function () {
    var hh = $(this).attr('href');
    var img = new Image();
    img.src = hh;

    function TIMG(i) {
      if (img.complete != null &amp;&amp; img.complete == true) {
        $('.mag').append('&lt;img src="' + hh + '" class="cls" /&gt;');
      } else {
        setTimeout(TIMG, 1000);
      }
    }

    setTimeout(TIMG, 1000);    
  });

  alert(hi);
});
</code></pre>
