Amélioration de la performance de l'info-bulle mais ne fonctionne pas dans les styles jquery et inline IE7 ou IE6

J'ai réussi à l'obtenir dans la position que je veux et à suivre la souris pendant qu'elle se déplace.

Je le faisais précédemment avec des styles en ligne et en mettant à jour les coordonnées de positionnement absolu en haut à gauche, dynamiquement en ligne.

Cela semble causer des problèmes de performance, j'ai donc écrit le style dynamique à <style> dans le <head> du dosument qui fonctionne bien dans Firefox, mais maintenant pas dans IE7 ou IE6.

Le jsFiddle est ici;

http://jsfiddle.net/SBhnc/7/

Je suppose que je dois enlever l'étiquette de la sur mouseout aussi bien, mais IE semble rendre une fois, puis toujours à nouveau dans la même position.

Je voudrais évidemment que cela fonctionne dans tous les navigateurs et ne souffre pas de grands succès comme c'était le cas lors de l'écriture de styles en ligne.

Source

2010-09-07 RyanP13

Si vous regardez cette fourche - http://jsfiddle.net/5YKNS/ Ensuite, passez la souris sur les porte-outils, puis vous devriez voir le ralentissement des performances que je vivais. – RyanP13

Vous ne savez pas exactement par où commencer, alors qu'en est-il de my changes? Comme vous pouvez le voir, cela fonctionne maintenant très bien dans Internet Explorer. Explications pour chaque changement:

Internet Explorer permet à un nombre maximal de StyleSheets (31 ou 32, je pense) et votre événement mousemove vous ont été l'ajout d'un nouvel élément <style> à la tête. Quand il atteint la limite, l'info-bulle ne bouge plus jamais. Je suis revenu à css() pour vous.
Chaque fois que vous passez la souris sur les éléments, vous attachez un nouvel événement mousemove. Le problème ici est que jamais déconnecter ce gestionnaire, donc la souris, la souris allume un nouveau gestionnaire à attacher à chaque fois, doublant le travail en cours et sur-stressant le navigateur (IE pauvre!). J'ai déplacé le gestionnaire mouseover dans son propre espace où il est seulement créé et attaché une fois. Chaque tour de souris créerait l'info-bulle, puis à la souris, vous la détacherez. Beaucoup mieux pour l'avoir dans le DOM pour commencer, juste hide() et show() il.
Vous ne faites pas toute la mise en cache des sélecteurs ou des variables. Chaque fois que vous écrivez $('#tooltip') c'est une recherche supplémentaire. Enregistrez le résultat de $('#tooltip') dans une variable et utilisez la variable.

j'ai fait une partie de la mise en cache de travail $('#tooltip'), mais vous devriez faire la même chose pour $(this). mousemove est un événement assez stressant, et peut être appelé plusieurs fois en quelques ms. Cela provoque un ralentissement du rendu car il attend que le script se termine.

Source

2010-09-07 22:55:38

c'est génial Andy. Vraiment apprécié. Autant que j'apprends à écrire réellement le code il aide vraiment à savoir comment l'optimiser aussi bien et ceci a été un aperçu valable. – RyanP13

@Ryan: pas de soucis :-) Vous pourriez aussi envisager de mettre en place votre infobulle en tant que plugin, ce qui la rendrait un peu plus portable. Recherche Google pour "tutoriel jQuery plugin" et vous devriez être en mesure de trouver quelque chose pour vous aider à démarrer. –

Amélioration de la performance de l'info-bulle mais ne fonctionne pas dans les styles jquery et inline IE7 ou IE6

Répondre

Questions connexes