Optimisation, déplacement curseur

[Wells]

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

  }); 

})

[Prélude]

Tu eux déjà remplacer les "Math.floor" par de simple "~~"
J'en parle rapidement dans cet article.

[niahoo]

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 !

[Prélude]

Ah oui, j'avions pas vu... Fatigué moa... M'en vais dormir...

[Xenos]

(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).

[Wells]

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' ?

[niahoo]

Je t'ai montré le code.
Tu appelles jQuery une seule fois, et ensuite tu gardes ta variable pour récupérer l'offset.

[Argorate]

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

[Xenos]

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()?

[niahoo]

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.