Discussion :

[muelsan]

Bonjour,
mon site est trop long à charger.Ma première mesure vas être d'alléger le poids des images de mes prochains post.La seconde d'installer un "infinite scroll"

mon site



La structure de la page d'accueil ne se prête pas aux configurations par défaut de l'infinite scroll donc je dois le paramétrer moi même en allant dans les options du plugins.

J'ai fais quelques recherches sur le net avant de poster mais elles ce sont avérées infructueuses.

pour les paramètres d'option j'ai mi les suivant:

Content Selector : #everybody
Navigation Selector : #gallery-wrap
Next Selector : #nav-below a:first
Item Selector : .attachment-large-grid wp-post-image loaded

j'ai trouvé un site qui à une structure similaire à la mienne et qui utilise l'infinite sroll ici donc je pense que ce que je demande est faisable.

N'ayant pas les compétences en programmation pour, un petit coup de main serais le bienvenue.




qui serais assez cool pour m'aider ?

[garheb]

Tu as un tas de scripts js avant d'avoir terminé l'affichage.

Mets les scripts à la fin de ton body.

[muelsan]

Merci Garheb
je vais faire ça.

et pour l'infinite scroll ?

[kOrt3x]

Réduire le poids des images c'est bien, mais est-ce vraiment indispensable d'avoir autant d'image sur cette page d'accueil ?

[rodolphebrd]

D'accord avec kOrt3x d'autant plus que la page met un temps infini à ce charger.

C'est vrai qu'autant d'images finit par nuire à l'intérêt de la page.
On se perd totalement dans ce flux ininterrompu d'images.

Le message finit par ne plus passer.

[Invité]

Bonjour,
mêmes remarques

OPTION 1
1/ redimensionner physiquement les images à 160px × 160px

dimensions images : 240px × 240px
dimensions d'affichage : 160px × 160px

2/ Afficher ALEATOIREMENT (ce qui n'est pas le cas actuellement) 20 à 25 images (ou autre multiple de 5).
3/ Eventuellement utiliser Ajax pour l'affichage des images (et toujours éventuellement, proposer via un bouton de les "rafraichir" par d'autres).

N.B. La largeur du html, body est fixée à 900px (style.css ligne 74).
C'est peu (surtout sur les écrans d'ordi actuels).

• 1072px -> 6 images par ligne
• 1234px -> 7 images par ligne

Surtout que les diaporamas ("rotator") sont "responsives"...

OPTION 2
1/ laisser les images à 240px × 240px, et les AFFICHER à 240px × 240px
2/ Modifier dans style.css (ligne 937) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.scroll-pane ul.large-grid a, .scroll-pane ul.large-grid img, .scroll-pane ul.large-grid li, #gallery-wrap ul.large-grid a, #gallery-wrap ul.large-grid img, #gallery-wrap ul.large-grid li {
   width:240px;
   height:240px;
}

Ce qui donne :

• 1068px -> 4 images par ligne
• 1310px -> 5 images par ligne

Bref : avec un peu de Media Queries, tu peux moduler la page en fonction de la largeur du média client (la rendre "responsive").

Bonus :
Intéresse-toi à Lazy Load.