jquery redimensionnement de l'image et la performance

Question

J'ai un problème assez étrange ici - J'utilise jquery pour redimensionner mon image d'arrière-plan (png, largeur: 1793, hauteur: 1200, taille: 872kb).

Ma fonction est ici:

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

Et voici comment je l'appeler:

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

Fonction fonctionne très bien dans tous les navigateurs, mais le problème est quand il vient à l'aide de fondu effets après le redimensionnement. C'est vraiment laggy - Opera n'a pas de problèmes, mais 2fps dans IE je dirais.

Existe-t-il une meilleure façon de faire ce type de redimensionnement (le maintien d'un format d'image est crucial)?

Merci à l'avance,

Mikk

Answer 1

explorateur Internet moteur JavaScript est séparé du noyau du navigateur et fonctionne très lentement par rapport aux autres navigateurs modernes. Puisque Javascript est le seul moyen de redimensionner dynamiquement, vous n'avez pas de chance avec IE. Mon propre site souffre du même problème. Et mon script n'est pas basé sur jQuery, il est hautement optimisé.

Ce que vous pouvez faire est d'utiliser un plugin Google pour accélérer le moteur IE javascript autour 10X fois, vous pouvez inclure un script simple dans votre site qui va aider les clients à installer s'ils veulent - http://code.google.com/chrome/chromeframe/

Vérifier des ressources dev web ici - http://www.chromium.org/developers/how-tos/chrome-frame-getting-started

Voir quelques résultats récents des tests de performance pour savoir ce dont je parle: http://www.legitreviews.com/article/1347/1/