2014-03-31 45 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); 
    }); 
}