function is too fast?

Question

This function actually works, but I don't think it's a good solution. If I do not add setTimeout, the function does not work well. (It only loads maybe half of the pictures). Is there a problem that I do not use "i" within the for-loop?

And is it a "good" solution to load the <img> tags into a hidden "load" div to work with them and sort them into 3 different divs?

function loadpictures() {
  $('#load').empty();
  $('#picTop').empty();
  $('#picMiddle').empty();
  $('#picBottom').empty();

  $('#load').load('pages/bilder.html .' + category, function() {

    LineW[0] = LineW[1] = LineW[2] = 0;

    for (var i = 0; i < $('#load img').length; i++) {
      window.setTimeout(function() {
        var shortLine = 0;
        for (var j = 1; j < 3; j++) {
          if (LineW[j] < LineW[shortLine]) {
            shortLine = j;
          }
        }
        switch (shortLine) {
          case 0:
            $('#picTop').prepend($('#load img')[0]);
            LineW[0] += $('#picTop img')[0].offsetWidth;
            break;
          case 1:
            $('#picMiddle').prepend($('#load img')[0]);
            LineW[1] += $('#picMiddle img')[0].offsetWidth;
            break;
          case 2:
            $('#picBottom').prepend($('#load img')[0]);
            LineW[2] += $('#picBottom img')[0].offsetWidth;
        break;
    }
  }, 20);
}

}); }

Answer 1

This example waits for images to load. If you want to refactor it, I would suggest getting an array of image paths then using his/her function.

function loadImage(path, width, height, target) {
  $('<img src="'+ path +'">').load(function() {
    $(this).width(width).height(height).appendTo(target);
  });
}

Answer 2

I replaced the for-loop with the .each jquery function now it works perfect for me :) Thy anyways!

$('#load').load('pages/bilder.html .'+category, function(){

$('#load img').each(function () {
    var shortLine = 0;
    for(var j = 1; j < 3; j++){
        if(LineW[j] < LineW[shortLine]){
            shortLine = j;
        }
    }
    switch (shortLine) {
        case 0:
            $('#picTop').prepend($('#load img')[0]);
            LineW[0] += $('#picTop img')[0].offsetWidth +5;
            break;
        case 1:
            $('#picMiddle').prepend($('#load img')[0]);
            LineW[1] += $('#picMiddle img')[0].offsetWidth +5;
            break;
        case 2:
            $('#picBottom').prepend($('#load img')[0]);
            LineW[2] += $('#picBottom img')[0].offsetWidth +5;
            break;
    }
});
});