jquery 图像大小调整和性能

发布于 2024-09-25 16:55:06 字数 926 浏览 8 评论 0原文

我这里有一个很奇怪的问题 - 我正在使用 jquery 调整背景图像的大小（png，宽度：1793，高度：1200，大小：872kb）。

我的函数在这里：

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();
    });
}

这就是我的调用方式：

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

函数在所有浏览器中都能正常工作，但问题是在调整大小后使用淡入淡出效果时。它确实很延迟 - Opera 没有问题，但我想说 IE 中只有 2fps。

有没有更好的方法来进行这种调整大小（保持纵横比至关重要）？

提前致谢，

米克

原文

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

分享到QQ

分享到微博