jquery image resizing and performance

Question

Hi,

I have quite an odd problem here - I am using jquery for resizing my background image (png, width: 1793, height: 1200, size: 872kb).

My function is here:

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 < screen.height) {
        bgHeight = screen.height;
        bgWidth = bgHeight/bgRatio;
        }
        if (bgWidth < 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();
    });
}

And this is how I'm calling it:

bgInit('img/bg.png', function(){
alert('done!');
});

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.

Is there any better way for doing this kind of resizing (maintaining aspect ratio is crucial)?

Thanks in advance,

Mikk

Answer 1

Internet explorer JavaScript engine is separate from the browser core and runs very slowly compared to other modern browsers. Since Javascript is the only way to dynamically resize, you are out of luck with IE. My own site suffers from the same issue. And my script is not based on jQuery, it is highly optimized.

What you can do is use a google plugin to speed up IE javascript engine around 10X times, you can include a simple script in your site that will help customers to install it if they want to - http://code.google.com/chrome/chromeframe/

Check out web dev resources here - http://www.chromium.org/developers/how-tos/chrome-frame-getting-started

See some recent performance test results to know what I am talking about: http://www.legitreviews.com/article/1347/1/