Discussion :

[olivierv75]

Bonjour tout le monde,

Depuis un script PHP, je génère un tableau dans lequel la dernière colonne contient une image cliquable (via javascript pas par un tag <a href=...>).

Cela fonctionne bien mais je trouve le chargement un peu long sur rafraîchissement de la page.

code HTML généré en PHP (pour une ligne):

Code html :

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

<td><img class='btnValider' src='images/png/24x24/valider.png' height='24' width='24'>

Lorsque je vois les traces de download, dans la console de développement de Firefox, je constate que l'image est téléchargée une seule fois et qu'elle est ensuite utilisée pour chaque <td> de chaque ligne du tableau.

Avez-vous une idée de la façon de faire pour optimiser l'affichage de cette image sur les différentes lignes de mon tableau ?

Merci

[Bovino]

je constate que l'image est téléchargée une seule fois

optimiser l'affichage de cette image sur les différentes lignes de mon tableau

Je comprends pas trop...

Tu voudrais qu'elle soit téléchargée moins de 1 fois ?

En tout cas, je ne vois pas comment une image en 24x24px pourrait ralentir la chargement de ta page... Ca doit faire moins de 5ko non ?

[Shuty]

A mon avis le problème ne vient pas de tes images mais surement du nombre de colonne de ton tableau. Ta tableau est dynamique ?

Donne nous une portions de code.

[olivierv75]

Bonsoir,

D'abord, merci pour vos réponses. J'ai essayé de faire simple pour ne pas compliquer la demande mais je vais être plus précis.

Le code PHP et HTML sont corrects. Le soucis vient uniquement du nombre d'images qui figurent dans le tableau généré en PHP...voir pièce jointe.

Les outils de développements de Firefox m'indiquent que les 3 images (en moyenne 2,5ko) se chargent en dernier et mettent presque 5300ms à se charger....Comme si le navigateur attendait le préchargement des images sur tous les lignes avant de les afficher d'un seul coup.

J'aimerai savoir s'il est possible de faire en sorte que les images se charge progressivement et non pas lorsque les 3 images x nombre de lignes soient préchargées.

Est-ce plus clair ?

[Celira]

Euh... ce sont les mêmes 3 images qui sont affichées autant de fois qu'il y a de lignes, non ? Donc chaque image n'est chargée qu'une seule fois (enfin j'espère ) Si l'image est chargée pour la 1ere ligne, elle est chargée pour toutes. Du coup, j'ai du mal à appréhender la notion de chargement progressif

Au passage, si tes images sont utilisées comme boutons, elles devraient avoir un attribut alt pour le cas où justement elles ne s'affichent pas.
Exemple :

Code html :

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

<img class='btnValider' src='images/png/24x24/valider.png' height='24' width='24' alt="Valider">

[olivierv75]

Bonjour Celira,

Je confirme que les 3 images ne sont téléchargées qu'une seule fois mais l'affichage met un temps fou (environ 5s) à afficher les images sur l'ensemble des lignes.

Comme si le navigateur attendait que toutes les cellules soient remplis pour afficher l'ensemble. Ce problème n'apparaît que lorsque je tape sur les touches CTRL+F5 et non pas quand je tape sur la touche F5 uniquement.

Je vais prendre en compte ta remarque sur l'ajout de l'attribut alt.

[Bovino]

Il y a combien de lignes dans ta table ?
Parce qu'une table HTML trop volumineuse (surtout si elle n'est pas balisée correctement ce qui est souvent le cas) met beaucoup plus de temps à s'afficher que trois petites images répétées...

En effet, avant d'afficher l'ensemble, le navigateur doit faire énormément de calculs coûteux pour déterminer les dimensions et positions de chaque cellule en fonction de leur contenu puis adapter l'ensemble pour un affichage harmonieux.
Et donc, si en plus tu n'indiques pas les éléments permettant de faciliter ces calculs (absence de balises <thead>, <tfoot> et <tbody> notamment), ça alourdi encore plus.

C'est une des raisons pour lesquelles la mise en forme à l'aide de tables est fortement déconseillée...

[olivierv75]

Bonsoir Bovino,

Le nombre de ligne est très variable mais je constate que le problème ne se déroule que lorsque je fais un CTRL+F5 donc c'est moins gênant.

Pour ce qui concerne ma mise en page sous forme de tableau, elle est justifiée puisqu'elle correspond à un tableau, comme on le ferait sous Excel mais je suppose que tu disais cela de manière générale.

J'ai également fais attention à bien baliser mon tableau avec des theader, tfooter et tbody, ajouter les dimensions (hauteur et largeur) des images lorsque j'ai crée ce tableau. J'avais juste oublié le tag alt (merci à celira pour m'avoir indiqué cette absence).

Je ne vais pas vous importuner plus longtemps avec ce soucis. Je vérifierai si le remplacement du tag img par la mise en background de l'image dans le td correspondant résout le soucis.

Je vous tiendrai informé si cette dernière option améliore les choses ; si ce n'est pas le cas, je passerai à autre chose. ;-)

En vous remerciant pour les précieux conseils que vous m'avez prodigués.

[olivierv75]

Bonsoir,

Je viens de constater qu'il était possible, comment, je ne sais pas encore, charger progressivement des images. J'ai par exemple constaté que FaceBook dispose d'un chargement progressif des images au dimension du Viewport (zone visible). Lorsque l'on descend dans la page, on constate de nouveaux téléchargements d'images...Bien entendu, les autres images sont mises en cache.