Jump to content

[résolu]Petit bug effet ajax sur images.


Recommended Posts

Bonjour comme je ne sais pas trop comment expliquer mon bug qui ce fais essentiellement sur les images des produits, je préfère vous guidez vers une des pages de mon sites pour que vous puissiez vous rendre compte de mon soucis.
Il faut en fait passer la souris sur les images, normalement cela se fait sans heurt le changement, chez moi c'est devenu laid et saccader.
Quelqu'un sait t'il pourquoi et peut t'il me guider vers l'amélioration de cet effet.

exemple ici:

http://dreams-pc.fr/prestashop/product.php?id_product=195

Passer votre souris sous l'image de base et vous verrez que les images apparaissent plus en fondu mais en saccade complète.
Merci de votre aide.

Link to comment
Share on other sites

ok je crois que j'ai compris ce qui te choque : c'est le temps que met l'image à charger lorsque tu passes sur une vignette ? une seconde environ, d'où effacement, puis nouvelle image. c'est ça ?

sinon question : tu peux me dire comment tu t'y es pris pour faire tes jolis tableaux (cellules) lorsque tu décris les spécificités des produits ?

Link to comment
Share on other sites

ok je crois que j'ai compris ce qui te choque : c'est le temps que met l'image à charger lorsque tu passes sur une vignette ? une seconde environ, d'où effacement, puis nouvelle image. c'est ça ?

sinon question : tu peux me dire comment tu t'y es pris pour faire tes jolis tableaux (cellules) lorsque tu décris les spécificités des produits ?


Oui c'est ça c'est le fameux temps de chargement qui fait que l'image ne fait pas de "fondu" mais une saccade que je n'aime pas beaucoup.
J'ai déjà remplacer le .js rien n'y fais pourtant, bon enfin c'est pas la mort mais c'est dommage juste.
Pour les tableau je me sert d'Excel et ensuite je fais copier coller mais je te laisse mon tableau de base celui que je me sert tout les temps fais en bon usage ;).

Chipset.doc

Link to comment
Share on other sites

Salut,

je pense que le problème vient de ton fondu, qui supprime l'image actuelle avant de la remplacer. Du coup cela créé un vide qui est comblé par tout ce qui se trouve en dessous. Ensuite l'image arrive enfin et tout rentre dans l'ordre en une fraction de seconde, d'où le clignotement.

La solution peut passer par un div contenant ton image à qui tu attributs une hauteur. Les vignette en dessous ne seraient ainsi pas tentées de remonter durant la transition.

Link to comment
Share on other sites

tu fais copier/coller depuis excel ? mais alors tu n'entres pas les infos dans les caractéristiques... ok. je cherchais le code pour formater les données issues des caractéristiques en mode tableau.

sinon, pour ton blem :
j'en ai un (presque) similaire.
l'image ne saute pas, mais est parfois "inversée" : la souris sur img2 affiche encore img1
je pense que le code qui appelle le js n'est pas encore au top.

et je pense que l'image qui disparait trop tôt (avec dans ton cas un écrat visible) n'est pas la meilleur chose.
je vais en parler à notre Damien national...
a+

Link to comment
Share on other sites

Salut,

je pense que le problème vient de ton fondu, qui supprime l'image actuelle avant de la remplacer. Du coup cela créé un vide qui est comblé par tout ce qui se trouve en dessous. Ensuite l'image arrive enfin et tout rentre dans l'ordre en une fraction de seconde, d'où le clignotement.

La solution peut passer par un div contenant ton image à qui tu attributs une hauteur. Les vignette en dessous ne seraient ainsi pas tentées de remonter durant la transition.


ah oui, c'est une idée q'elle est bonne ça. (en voilà un qui sait de quoi il parle. pas comme moi) :-)
on fait ça dans le tpl j'imagine.
tu saurais nous donner la structure du code (quoi et ou?) perso suis pas un crac en code... j'apprends sur le tard..
tks !
Link to comment
Share on other sites

Voilà j'ai mis le fichier en fait jje le remplis sous Word et je copie colle ça dans la partie description de Prestashop et ça met les cadres et cellules c'est sympa en effet.
Bon là pour le problème de l'image et du div tu me parle en Chinois simplifié avec ut8 iso 2000, e, gros je comprend rien lol je suis dans le php depuis tout juste 1 à 2 semaines donc je comprend que dale.
;).

Link to comment
Share on other sites

et la saccade ça vient peut-être aussi du temps de réponse du serveur. moi, j'ai vraiment "à peine" cet effet...
peut-être si tu peux jouer sur la cache ou kekchose dans le genre ? au niveau du php.ini ? mais j'en connais pas plus. une piste ?

Link to comment
Share on other sites

autre chose : tes photos sont optimisées ? t'as pas chargé des trucs de plusieurs mégas ?

Arf bien vu j'ai effectivement pousser à 100 la qualité d'images des images .jpg selon les conseils d'un poste je sais plus trop où.
Si ça se trouve ça vient de là, je rechange mes paramètres et je te tiens au courants.
Link to comment
Share on other sites

oula... j'ai la pression là :)

les effets ajax sont gérés par du javascript, en utilisant l'excellente librairie jQuery.

Pour faire cet effet de survol, il y a en fait plusieurs étapes, le but est de remplacer une image par une autre.

... je vais chercher le bout de code concerné et commenter un peu...

Link to comment
Share on other sites

autre chose : tes photos sont optimisées ? t'as pas chargé des trucs de plusieurs mégas ?

Arf bien vu j'ai effectivement pousser à 100 la qualité d'images des images .jpg selon les conseils d'un poste je sais plus trop où.
Si ça se trouve ça vient de là, je rechange mes paramètres et je te tiens au courants.


je dis pas que c'est ça, mais je commencerais par soulager le serveur... ça peut pas lui faire de mal.

sinon, perso je mets tout en 72 et 600x600 - ça fonctionne assez bien en ce qui me concerne. mais je suis sur un dédié aussi. ça aide. (10x + rapide)
Link to comment
Share on other sites

oula... j'ai la pression là :)

les effets ajax sont gérés par du javascript, en utilisant l'excellente librairie jQuery.

Pour faire cet effet de survol, il y a en fait plusieurs étapes, le but est de remplacer une image par une autre.

... je vais chercher le bout de code concerné et commenter un peu...


vi. ça c'est gentil.

en passant, t'aurais une idée pour mon problème de chgt de photos qui n'est pas "vu" ? (de temps à autres... c'est pas systématique)
Link to comment
Share on other sites

bon j'trouve pas d'exemple...

L'idée est que l'image soit contenue dans un div qui serve de cale pour le moment où l'image a disparu.

dans le .tpl qui gère l'affichage des produits




{le code smarty qui envoie l'image}






et dans le css donner une hauteur pour éviter que les vignettes ne remontent

.cale {

height: 200px

}

ça devrait marcher... ça évite que le design parte en c*** si l'image n'arrive jamais

Link to comment
Share on other sites

oui. j'avais compris ça en effet. (qu'est ce que je suis fort quand même !!!) :-)

ça m'étonnes que ce ne soit pas d'office dans le code.
en principe il n'y a qu'une ligne à encadrer ainsi.
tu sais ou est ce code qui envoi l'image ?

Link to comment
Share on other sites

mea culpa,

en vérifiant avec firebug, l'image est bien déjà contenue dans un bloc.




tu as donc dû en modifiant ton thème supprimer ça :
global.css (ligne 1723)

primary_block #image-block {
height:300px;
width:300px;
}

Link to comment
Share on other sites

Qualité d'images jpg descendu de 100 à 75 et toujours pareil rien ne change encore ce bug, pourtant je l'avais pas avant et je trouve ça bête que ça foire maintenant à quelques jours / semaines de me mettre en ligne.
Mes images ont les tailles par défauts, je n'ai rien changer mis à part la résolutions de celles ci.

Link to comment
Share on other sites

Pour le problème de changement d'image, ça peut venir de la machine et des perfs en javascript du navigateur

(si ça rame et que tu survoles plusieurs images, il risque de ne pas prendre en compte la dernière survolée, ou ce genre de comportement)

Link to comment
Share on other sites

mea culpa,

en vérifiant avec firebug, l'image est bien déjà contenue dans un bloc.



tu as donc dû en modifiant ton thème supprimer ça :
global.css (ligne 1723)

primary_block #image-block {
height:300px;
width:300px;
}



Merci ça venais bien de là en effet j'ai rajouter tes lignes et ça fonctionne à merveille, super je suis content pour un peux je t'embrasserais.
Non sérieux vraiment merci à vous deux c'est impeccable.
Link to comment
Share on other sites

Pour le problème de changement d'image, ça peut venir de la machine et des perfs en javascript du navigateur

(si ça rame et que tu survoles plusieurs images, il risque de ne pas prendre en compte la dernière survolée, ou ce genre de comportement)

Heu j'ai un Core2Quad avec 8 Go de ram en DDR2 je crois que mon pc ne souffre pas trop pour ça.
Link to comment
Share on other sites

OK, Fabrice avait parlé d'un autre bug, les images survolées ne correspondant pas à l'image affichée... ça je pense que c'est lié aux perf. de la machine. (j'arrive à le reproduire quand je passe d'une image à l'autre rapidement) Je pense qu'il n'y a pas grand chose à faire pour ça.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...