2010-04-25 10 views
7

J'utilise Jquery pour faire défiler horizontalement une image sur ma page. Le seul problème est qu'il utilise une quantité importante d'utilisation du processeur. Jusqu'à 100% sur un seul ordinateur portable dans firefox. Qu'est-ce qui pourrait causer cela ???Utilisation du processeur Jquery

Jquery

<script> 
    jQuery(document).ready(function() { 

    $(".speech").animate({backgroundPosition: "-6000px 0px"}, 400000, null); 
    }); 

    </script> 

CSS

.speech { 
    /*position:fixed;*/ 
    top:0; 
    left:0px; 
    height:400px; 
    width:100%; 
    z-index:-1; 
    background:url(/images/speech.png) -300px -500px repeat-x; 
    margin-right: auto; 
    margin-left: auto; 
    position: fixed; 
} 

HTML

<div class="speech"></div> 
+0

Crikey vraiment? Je n'ai jamais rencontré un tel cochon de la mémoire. Quel navigateur utilisez-vous? Je ne peux pas reproduire le problème. Essayez la même chose mais n'utilisez pas un png - essayez un gif/jpg à la place et voyez si vous avez le même problème. – Glycerine

+3

Il n'a pas dit que c'était un cochon de la mémoire; ce n'est pas ce que signifie l'utilisation du processeur à 100%. – Pointy

Répondre

12

Il utilise les ressources du processeur car vous demandez au navigateur de repeindre une image plusieurs fois par seconde sur une longue période. Ce n'est pas gratuit.

+0

+1. pas de vote restant. – sepehr

0

Si cela est un problème lié à la mémoire cpu alors vous pouvez annuler le résultat de l'appel de fonction jQuery. Si votre appel retourne un objet jQuery puis après l'appel, vous pouvez le mettre à null:

var tmp = $(".speech").animate({backgroundPosition: "-6000px 0px"}, 400000, null); 
}); 
tmp = null; 

Note: Si cela est LIÉ avec la fuite de mémoire, alors il doit faire avec des références circulaires et en fixant à null, vous pouvez le casser.

Faites un essai, je voudrais savoir les résultats si vous avez le temps de poster.

+0

Ça ne va rien faire du tout. Le problème décrit est celui de la charge du processeur pendant l'animation. Libérer l'objet jQuery après l'animation n'affectera pas le processus de l'animation elle-même. – Pointy

+0

Vous pouvez donc omettre tous les problèmes liés à la mémoire. J'irais dans les détails d'exécution de fonction d'animate et vérifie des problèmes, je m'assurerais également que les params de contrat de fonction/méthode sont compris. Si l'animation est importante dans votre application, je suggère de chercher des bibliothèques JS qui se concentrent sur les animations. Il pourrait y avoir un plugin ou une extension dans jQuery qui gère mieux l'animation. Désolé de ne rien faire de bon ... parfois, nous avons besoin d'un endroit pour commencer et trouver notre chemin vers la cible après avoir rejeté les facteurs un par un. – Andreas

11

En cas quelqu'un est à la recherche d'une solution à une utilisation élevée du processeur lors de l'utilisation des animations jQuery (comme je l'étais), il convient de noter que jQuery.fx.interval a été ajouté à jQuery 1.4.3 afin que vous puissiez contrôler le taux d'intervalle d'animation.

Exemple d'utilisation (ce réglage à environ 50-70 gardé mes animations fluides et je remarquai l'utilisation du processeur a chuté à environ 10-20%):

jQuery.fx.interval = 50;

+1

c'est tout - point. – schellmax