Question

我在这里有一个奇怪的问题 - 我使用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我会说。

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

提前致谢，

Mikk

Answer 1

Internet Explorer JavaScript引擎与浏览器核心分开，与其他现代浏览器相比运行速度非常慢。由于Javascript是动态调整大小的唯一方法，因此IE运气不佳。我自己的网站也遇到了同样的问题。我的脚本不是基于jQuery，而是高度优化。

你可以做的是使用谷歌插件加速IE浏览器的javascript引擎大约10倍，你可以在你的网站中包含一个简单的脚本，帮助客户安装它，如果他们想要 - http://code.google.com/chrome/chromeframe/

在此处查看网络开发资源 - http://www.chromium.org/developers/how-tos/chrome-frame-getting-started

查看最近的一些性能测试结果，了解我在说什么：http://www.legitreviews.com/article/1347/1/

jquery图像调整大小和性能

1 个答案: