title: jquery image resizing and performance
body: <p>I have quite an odd problem here - I am using jquery for resizing my background image (png, width: 1793, height: 1200, size: 872kb).</p>
  
  <p>My function is here:</p>
  
  <pre><code>bgInit = function(img, clbk) {
  var bgObj = $('#bgImg');
  var bgHeight = bgWidth = 0;
      bgObj.attr('src',img).ready(function(){
      var bgRatio = bgObj.height()/bgObj.width();
          if (bgHeight &lt; screen.height) {
          bgHeight = screen.height;
          bgWidth = bgHeight/bgRatio;
          }
          if (bgWidth &lt; screen.width) {
          bgWidth = screen.width;
          bgHeight = bgWidth*bgRatio;
          }
      //resize and center horizontally
      bgObj.height(bgHeight).width(bgWidth).css('margin-left',(screen.width-bgWidth)/-2);
      clbk();
      });
  }
  </code></pre>
  
  <p>And this is how I'm calling it:</p>
  
  <pre><code>bgInit('img/bg.png', function(){
  alert('done!');
  });
  </code></pre>
  
  <p>Function works fine in all browsers, but the problem is when it comes to using fade effects after resizing. It's really laggy - Opera has no problems, but 2fps in IE I'd say.</p>
  
  <p>Is there any better way for doing this kind of resizing (maintaining aspect ratio is crucial)? </p>
  
  <p>Thanks in advance,</p>
  
  <p>Mikk</p>