jquery图像调整大小和性能

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

我的功能是在这里：

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

来源

2010-10-02 Mikk

这真不是一个jQuery的问题 - 它没有做*图像缩放任何*工作。这一切都是由浏览器完成的。老版本的IE会很慢。 – Pointy 2010-10-02 21:42:35

Internet Explorer的JavaScript引擎是浏览器内核独立，并与其他现代浏览器运行速度非常慢。由于Javascript是动态调整大小的唯一方式，因此对于IE来说运气不佳。我自己的网站遭受同样的问题。我的脚本不是基于jQuery，而是高度优化的。

你可以做的是使用谷歌插件，以加快IE的JavaScript引擎周围10X倍，您可以在您的网站一个简单的脚本，将帮助客户安装，如果他们想 - http://code.google.com/chrome/chromeframe/

检查在这里web开发资源 - http://www.chromium.org/developers/how-tos/chrome-frame-getting-started

看到一些最近的性能测试结果知道我说的是：在所有http://www.legitreviews.com/article/1347/1/

来源

2010-10-02 22:25:31

我不认为这是真的。是的，渲染引擎和Javascript是分开的，就像**所有**浏览器中的情况一样。但是，当Javascript代码重置样式属性以改变元素的大小时，它不是执行结果布局调整的JavaScript引擎 - 它是渲染引擎。 – Pointy 2010-10-02 23:09:00

你可以看看这张图片http://ieblog.members.winisp.net/images/Dean_PPB4_5.png这篇文章的一部分 - http://blogs.msdn.com/b/ie/archive/2010/08 /04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx看看我的意思。此外，您不知道是否在调整布局时更改了样式属性。最后它没关系，因为我指出的解决方案也取代了渲染引擎。 – 2010-10-02 23:57:33

jquery图像调整大小和性能

回答

相关问题