Loading images one by one

Loading images one by one

Hi,

I am working on a project for my portfolio. For this I am preloading images using the each statement. However I do not want jQuery to go to the next image before the previous one is loaded - unless it can't load the image at all! How can I fix this?

   this.each(function() {
         var par = $(this);
         var obj = $("li a", par);
         var img = $("img", par);
         var b = $("li", par).width();
         var w = $("li a", par).width();
         var h = $("li a", par).height();
         var p = b - w;
         // correct dimensions
         var pw = par.width();
         var bw = (pw - (( p * options.perLine ) + p )) / options.perLine;
         var r = bw / w;
         var bh = h * r;
         // set obj dimensions
         obj.width(bw).height(bh);
         // load the images
         img.hide();
         $(img).load(function() {
            var i = $(this);
            
            // now our beloved ajax is gonna kick in
            $.ajax({
               success:   function() {
                           // correct the image
                           i.width(bw).height(bh);
                           // fade it in
                           if(options.fadeIn) i.fadeIn();
                           else i.show();
                        }
            });
         });
         
         
         // please don't let my boxes fall from the sky
         if(options.fixWidth) par.width(par.width());
         
         // show the loader image
         obj.css({backgroundColor: options.loadingBg, backgroundImage: "url(" + options.loadingImg + ")", backgroundPosition: "center"});
      });