我有一個頁面，最多可以包含8張卡片。該卡的寬度/高度尺寸均爲1：1。卡片的寬度至少應爲250像素，最寬爲350像素。但屏幕只有一對夫婦的位置，所以當它達到最大值時可以無需滾動，我隱藏了最後一張。我這樣做，用下面的代碼：如何優化窗口調整大小和初始化圖像自動調整

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上，我不知道它會在一臺舊的慢速筆記本電腦上做什麼。

有沒有什麼辦法可以優化呢？

來源

2014-01-14 Thew

我似乎無法打開您的JS bin來執行某種分析，但查看您的代碼在foreach循環中執行遞歸可能是問題的根源。

我認爲你應該看看在窗口停止調整大小（使用超時/類似）之後觸發fixsizes（），並考慮使用detach()操縱DOM上的圖像寬度。

來源

2014-01-14 13:37:06

如何優化窗口調整大小和初始化圖像自動調整

Click to see example，嘗試和調整窗口的大小。

回答

相關問題