2014-03-31 41 views
-1

這個函數實際上有用,但我認爲這不是一個好的解決方案。如果我不添加setTimeout,該功能無法正常工作。 (它只能加載所有圖片的一半)。 有沒有問題,我不使用for循環內的「我」?功能是否快?

這是一個「好」的解決方案,將標籤加載到一個隱藏的「加載」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); 
     } 
    }); 
} 

編輯:

我更換了與。每個jequery功能迴路現在的作品非常適合我:)你的反正!

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

但該功能應該做什麼? – xyz

+0

該函數加載img標籤與從另一個文件的類X到一個隱藏的div「#load' 然後我根據每個div的總寬度將圖片排序爲3個可見DIVS(總是將下一張圖片添加到最短) – easyX

+0

如果您有解決方案,您應該將其作爲答案發布並接受它。回答您自己的問題是可以的。 –

回答

0

我用.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; 
    } 
}); 
}); 
0

This example等待圖像加載。如果你想重構它,我會建議獲取一組圖像路徑,然後使用他/她的功能。

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