l'asile.fr


Chrome + CSS3 + Parallax + images de poids

J'ai réalisé un CV online que je dois envoyer ce week.
Une page unique en HTML utilisant les CSS3, ce qui me permet de redimensionner automatiquement les images + la page (celles ci s'adaptent en fonction de la largeur de la fenêtre : ça gère du mobile/tablette jusqu'à du big HD, 27"). J'ai 2 systèmes de parallax :
- 1 basé sur 5 images superposées
- 1 autre basé sur 4 PNG, le tout réagissant au passage de la souris

Les images font dans les 300/500 ko, c'est vraiment du très lourd.

Alors, sous Firefox, IE et Opéra, ça déchire sa mère, par contre Sous Chrome et Safari ça mouline tellement que le site n'est plus exploitable dans le sens ou lorsque je fais défiler de haut en bas avec la barre d'ascenseur ça saccade à mort.

Seule solution, virer le parallax (+ jQueryMin), simplifier le CSS et écraser toutes les images superposées ... Là ça va ...
Quelqu'un a déjà eu ce problème avec Chrome ? CSS3 + Parallax + page lourde = saccades
J'ai aussi tenté avec un préloader qui me charge la page entière avant de l'afficher, mais rien à faire.

Fait iech, parce que ça enlève beaucoup de dynamisme à la page PHP.
Par exemple ici, j'avais la partie Murciélago + partie panneau + partie grillage + partie Background qui se déplaçaient sous différent axe ... Maintenant, c'est juste une seule image ...


Dernière modification le 21/03/13 à 12:07 par groove_salad
jeudi
21 mars 2013 à 12:05
 
 

faudrait voir le code pour voir s'il y a un problème.
as tu fais du responsive design ? genre comme l'asile, et adapter la taille des images sources en fonction de la résolution du terminal.


jeudi
21 mars 2013 à 12:22
 
 

Oui tout à fait, je ne voulais pas monter un site alternatif via jQuery Mobile en parallèle.
Apparemment ça vient des images très lourdes (en tout dans les 5 mégas) qui en se redimensionnant provoquent un méga lag sous Chrome et Safari ...
Arf, chez CM, ils n'utilisent que Chrome, sont pénibles ces Hollandais :)


jeudi
21 mars 2013 à 12:43
 
 

Selune
#4 Budmo !

Tu veux nous linker un exemple de ta page, qu'on teste et qu'on te dise ce que ça donne sur nos configs ?


jeudi
21 mars 2013 à 14:39
 
 

#5

Tu as pas des scripts qui posent problème et ralentissent ton chrome ?


jeudi
21 mars 2013 à 14:50
 
 

Gingembre
#6 Affreudisiaque

Ca t'apprendra à faire des CV de Jacky !


jeudi
21 mars 2013 à 15:22
 
 

Merci mais c'est bon, j'ai tout simplifié. comme dit Gingembre j'ai viré la partie jacky touch.
Ce n'était pas les scripts mais les superpositions de PNG (en 1920 x 1280, 500Ko l'image) ... Chrome n'aime vraiment pas ça :)


Dernière modification le 21/03/13 à 17:18 par groove_salad
jeudi
21 mars 2013 à 17:17
 
 

Vous en pensez quoi ? Sachant que le Footer + Header sont fixes (c'est à dire que la partie du haut, jusqu'à Much More et la partie du bas, les logos + contacts apparaissent continuellement à l'écran). Tout le reste défile entre ces 2 parties et le tout s'adapte à tous les écrans.
C'est pour un poste de WebDesigner, donc ça reste graphique et orienté sur la marque ...

Capture.
Chaque image redirige vers une Landing Page complète et chaque lien vers des créations. Le logo en rouge en haut contient en fait mon nom et prénom.


Dernière modification le 21/03/13 à 17:37 par groove_salad
jeudi
21 mars 2013 à 17:34
 
 

Gingembre
#9 Affreudisiaque

Franchement pas simple de juger
Tu peux refaire le même mais avec des meufs à poil au lieu de PC de merde ?


jeudi
21 mars 2013 à 17:40
 
 

Ouais.
Ou des varans.


jeudi
21 mars 2013 à 17:44
 
 

Je peux mais je ne suis pas sur que CM apprécie la plaisanterie à sa juste valeur.
J'ai déjà fait une fête avec eux, et je peux te dire que ce ne sont pas des comiques, dans le sens où c'est pas trop le genre à mater des photos et films de boules, à picoler et à chanter des chansons paillardes ...


jeudi
21 mars 2013 à 17:46
 
 

Ce soir là, nous étions 5 à être bourrasque d'ailleurs ... (5 sur 120 personnes). Il a fallu que je retouche les photos de la soirée sur Paris présentes sur la page, parce que vraiment, ça se voyait que j'avais éclusé comme un porcelet assoiffé !


Dernière modification le 21/03/13 à 17:48 par groove_salad
jeudi
21 mars 2013 à 17:47
 
 


Répondre au sujet

Vous devez être identifié pour participer à ce topic.