如何在窗口调整大小和初始化时优化图像自动调整

Question

我有一个最多可包含8张卡片的页面。该卡均为1：1宽度/高度尺寸。这些卡的宽度必须至少为250像素，最大宽度为350像素。但屏幕只有一对夫妇的位置，所以当它达到maxmimum时它可以没有滚动的需要，我隐藏了最后一个。我使用以下代码执行此操作：

 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循环中进行递归可能是问题的根源。

我认为你应该看一下在窗口停止调整大小（使用超时/类似）后触发fixsizes（），并考虑使用detach()从DOM操纵图像的宽度。