+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Optimisation, déplacement curseur (/showthread.php?tid=7117)
Pages :
1
2
Optimisation, déplacement curseur - Wells - 17-09-2014
Bonjour à tous, j'ai un bout de script permetant de déplacer une image (un cadre) sur une map.
Sur un petit div, ca marche niquel, sans lag.
Mais sur de grosses cartes de plus milliers de pixels de largeur/hauteur, ca lag.
Je comprend pas pourquoi la taille de ma page impacte a ce point le script:
jQuery(document).ready(function() {
$(document).mousemove(function(e) {
//gestion du scroll
//var p = $("#zone_map");
//var x_s = p.scrollLeft() % 40;
//var y_s = p.scrollTop() % 40;
var X = ((Math.floor((e.pageX + x_s - 38) / 40) + 1) * 40) - 10;
var Y = ((Math.floor((e.pageY + y_s - 38) / 40) + 1) * 40) - 8;
$('#cache_case').offset({ top: Y - y_s, left: X - x_s});
//$('#debug').html(Y + ' - ' + p.scrollTop() + ' - ' + y_s + ' = ' + (Y - y_s));
});
})
RE: Optimisation, déplacement curseur - Prélude - 17-09-2014
Tu eux déjà remplacer les "Math.floor" par de simple "~~"
J'en parle rapidement dans cet article.
RE: Optimisation, déplacement curseur - niahoo - 17-09-2014
Et tu peux également créer une variable plutot que d'appeller jQuery en permanence
Code :
jQuery(document).ready(function() {
var machin = $('#cache_case');
$(document).mousemove(function(e) {
//gestion du scroll
//var p = $("#zone_map");
//var x_s = p.scrollLeft() % 40;
//var y_s = p.scrollTop() % 40;
var X = ((Math.floor((e.pageX + x_s - 38) / 40) + 1) * 40) - 10;
var Y = ((Math.floor((e.pageY + y_s - 38) / 40) + 1) * 40) - 8;
machin.offset({ top: Y - y_s, left: X - x_s});
//$('#debug').html(Y + ' - ' + p.scrollTop() + ' - ' + y_s + ' = ' + (Y - y_s));
});
})Tiens ben il le dit aussi dans son article !
RE: Optimisation, déplacement curseur - Prélude - 17-09-2014
Ah oui, j'avions pas vu... Fatigué moa... M'en vais dormir...
RE: Optimisation, déplacement curseur - Xenos - 17-09-2014
(x_s et y_s ne sont pas définis.)
Y'a pas de raison apparente que le code JS influe sur la vitesse de rendu en fonction de la taille de l'image. A la limite, la seule raison à "ca rame quand la carte est grande" serait effectivement l'appel répétitif au sélecteur jQuery (sous-entendonc: ta grande carte est constituée d'un tas de balises html qui donc ralentissent le sélecteur)...
Donc, je pencherai plutôt pour un code ralentit quelque part ailleurs. Un code qui utiliserait la taille de la carte pour faire ses calculs... Et par conséquence, si la taille est grande, la page est ralentie et cela ne se voit que parce qu'un élément suit la souris.
Tu peux insérer une animation SVG quelque par dans la page pour voir si le ralentissement de l'image qui suit la souris est la cause du problème (le code de suivit de la souris rame) ou une conséquence (un autre code est gourmand et entraine que l'image suivant la souris rame).
RE: Optimisation, déplacement curseur - Wells - 18-09-2014
Effectivement, ca venait du fait que j'avais 20 milles elements html (c le chiffre, pas une exageration)
Avec une seule image svg (enorme) ca passe niquel.
Par contre j'ai pas compris le cout de pas appeler jquery, sinon comment detecter le deplacement de la sourie ?
~~ = arrondi inférieur ????
y a une page ou on peut trouver ce genre de 'tips' ?
RE: Optimisation, déplacement curseur - niahoo - 18-09-2014
Je t'ai montré le code.
Tu appelles jQuery une seule fois, et ensuite tu gardes ta variable pour récupérer l'offset.
RE: Optimisation, déplacement curseur - Argorate - 20-09-2014
faire $(selecteur) a un cout non négligeable. Jquery étant complétement pas optimisé, tu baisses tes performances car il recrée un nouvelle élément jquery à chaque fois.
Donc tu le met en "cache" dans une variable une fois pour toute, et ensuite tu l'appels dans chaque mouseover, sans avoir à le recréer
RE: Optimisation, déplacement curseur - Xenos - 20-09-2014
Si on cherche des perfs, document.getElementById() est quand même plus vif.
Comment fait-on pour le même résultat, sans avoir une variable "globale" (machin) qui se promène hors de la callback passée à JQuery.mousemove()?
RE: Optimisation, déplacement curseur - niahoo - 20-09-2014
tu peux passer ta variable en tant que "this" de la callback. mais bon ici la variable n'est pas globale, on reste dans le scope de la fonction passée a "ready" donc c'est bien.