윈도우 크기 조정 및 초기화시 이미지 자동 조정을 최적화하는 방법

Question

최대 8 개의 카드를 포함 할 수있는 페이지가 있습니다. 카드는 모두 1 : 1 너비/높이 크기입니다. 카드는 250px 너비와 최대 350pixels 여야합니다. 그러나 화면에는 부부를위한 장소 만 있으므로 스크롤하지 않아도 가질 수있는 최대 크기에 도달하면 마지막 항목을 숨 깁니다. 나는 다음과 같은 코드로 그렇게 :

function fixsizes(){ 
    $('.container').each(function(){ 
      var container = $(this); 
      var contents = $(this).find('.card:visible'); 

      contents.each(function(){ 
       var marginpaddingwidth = contents.length * 101; 
       var availablewidth = parseInt(container.width()) - marginpaddingwidth - 10; 
       var width = (availablewidth/contents.length); 

       if(width < 251){ 
        if(contents.length > 1){ 
         contents.last().hide(); 
        } 

        fixsizes(); 
       } 
       else if(width > 349){ 
        var chidden = container.find('.card:hidden'); 
        if(chidden.length != 0){ 
         chidden.first().show(); 
         fixsizes(); 
        } 
       } 
       else 
       { 
        $(this).css('width', width + 'px'); 
        $(this).find('.card-image').css('width', width + 'px').css('height', width + 'px'); 
       } 
      }); 
     }); 
    } 

Click to see example 시도하고 창 크기를 조정합니다.

최신 Chrome (31)을 사용하면 완벽하게 작동합니다. 유일한 문제는, 내가 화면 크기를 조정할 때마다, 특히 다른 카드를위한 충분한 공간이있을 때마다, 계산 때문에 내 브라우저 전체가 잠기는 것입니다 (제 생각에는?). 그리고 나는 이미 하이 엔드 PC를 사용하고 있으며, 오래된 느린 노트북에서 어떤 일을하는지 궁금합니다.

내가 이것을 최적화 할 수있는 방법이 있습니까?

Answer 1

프로파일 링을 수행하기 위해 JS bin을 열 수있는 것 같지 않지만 foreach 루프 내에서 재귀를 수행하는 코드를 살펴보면 아마 문제의 원인 일 수 있습니다.

윈도우가 크기 조정을 멈추고 (시간 제한/비슷한 사용) fixchize()를 실행하고 detach()을 사용하여 DOM의 이미지 너비를 조작하는 방법을 살펴보아야한다고 생각합니다.