功能太快？

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

此示例等待图像加载。 如果你想重构它，我建议获取一组图像路径，然后使用他/她的函数。

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;
    }
});
});