Question

这个功能确实有效，但我认为这不是一个好的解决方案。如果我不添加setTimeout，则该函数不能正常工作。（它只加载了一半的图片）。有没有问题，我不在for循环中使用“i”？

这是一个“好”的解决方案，将<img>标签加载到隐藏的“加载”div中以与它们一起工作并将它们分成3个不同的div？

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等待加载图片。如果你想重构它，我会建议使用他/她的函数来获取一系列图像路径。

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

Answer 2

我用.each jquery函数替换了for循环，现在它对我来说很完美:)不管怎么样！

$('#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;
    }
});
});

功能太快了？

2 个答案: