Chargement d'une page trop longue

Version imprimable

Bonjour,
sur une page j'affiche 15 photos. La taille d'origine des photos est environ 1300 px x 850 px.
Au chargement de la page je réduis la taille de chaque photo. Et lors du 1er chargement cela prend du temps.
je voudrais donc savoir comment faire pour améliorer le temps de chargement.

la première de mon tableau avec les images

Code:

1
2
3
4
5
6
7
8
 
	<tr class="centrer">
		<td><img src="images/eglise/interieur/carreaux_vernisses.jpg" class="imgp" alt="" onclick="javascript:voir('1');"><br>Carreaux vernissés XIIIè siècle</td>
		<td><img src="images/eglise/interieur/carreau_detail_1.jpg" class="imgp" alt="" onclick="javascript:voir('2');"><br>détail carreaux vernissés</td>
		<td><img src="images/eglise/interieur/carreau_detail_2.jpg" class="imgp" alt="" onclick="javascript:voir('3');"><br>détail carreaux vernissés</td>
		<td><img src="images/eglise/interieur/carreau_detail_3.jpg" class="imgp" alt="" onclick="javascript:voir('4');"><br>détail carreaux vernissés</td>
		<td><img src="images/eglise/interieur/carreau_detail_4.jpg" class="imgp" alt="" onclick="javascript:voir('5');"><br>détail carreaux vernissés</td>
	</tr>

la partie CSS

Code:

1
2
3
4
 
.imgp {
	width: 213px;
}

Merci d'avance pour votre aide

24/09/2015, 17h13
Muchos

Peut-être faudrait-il prendre le problème à l'envers: ne pas charger toutes les images puis les réduire, mais proposer des miniatures et charger chaque image au clic.

Remarque: j'imagine que vous utilisez l'élément TABLE pour organiser votre contenu. Ce n'est pas le bon usage d'un tableau ici (il me semble aussi que le calcul du rendu d'un tableau peut être lourd pour le navigateur). Préférez l'usage d'une feuille de style (CSS), notamment la propriété DISPLAY qui vous permet, entre autres, d'émuler un tableau.

Si je comprends bien, vous suggérez de réduire la taille des photos d'origine pour ne pas avoir à le faire lors du chargement?
le clic que j'ai sur chaque image permet d'afficher l'image sélectionné dans un format plus grand qui pas lui non plus le format d'origine.

fonctionnement actuelle de ma page :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="fermer_texte"> 
	<p style="text-align:center">Cliquer sur la photo pour fermer</p>
</div>
<div id="table-images">
<table id="petits-formats" align="center">
	<tr height="30px">
		<td colspan="5" style="text-align:center; font-size:16px;"><b>Intérieur l'église Saint Martin</b></td>
	</tr>
	<tr height="30px">
		<td colspan="5" style="text-align:center; color:blue; font-size:15px">Cliquez sur une photo pour l'agrandir</td>
	</tr>
	<tr class="centrer">
		<td><img src="images/eglise/interieur/carreaux_vernisses.jpg" class="imgp" alt="" onclick="javascript:voir('1');"><br>Carreaux vernissés XIIIè siècle</td>
		<td><img src="images/eglise/interieur/carreau_detail_1.jpg" class="imgp" alt="" onclick="javascript:voir('2');"><br>détail carreaux vernissés</td>
		<td><img src="images/eglise/interieur/carreau_detail_2.jpg" class="imgp" alt="" onclick="javascript:voir('3');"><br>détail carreaux vernissés</td>
		<td><img src="images/eglise/interieur/carreau_detail_3.jpg" class="imgp" alt="" onclick="javascript:voir('4');"><br>détail carreaux vernissés</td>
		<td><img src="images/eglise/interieur/carreau_detail_4.jpg" class="imgp" alt="" onclick="javascript:voir('5');"><br>détail carreaux vernissés</td>
	</tr>
</table>
</div>
<div id="images" align="center">
	<img src="images/eglise/interieur/carreaux_vernisses.jpg" alt="" id="1" onclick="javascript:fermer('1');">
	<img src="images/eglise/interieur/carreau_detail_1.jpg" alt="" id="2" onclick="javascript:fermer('2');">
	<img src="images/eglise/interieur/carreau_detail_2.jpg" alt="" id="3" onclick="javascript:fermer('3');">
	<img src="images/eglise/interieur/carreau_detail_3.jpg" alt="" id="4" onclick="javascript:fermer('4');">
	<img src="images/eglise/interieur/carreau_detail_4.jpg" alt="" id="5" onclick="javascript:fermer('5');">
</div>

lors de l'affichage de la page :
le DIV "fermer_texte" est display: none au démarrage
le DIV "table-images" est display: inline au démarrage
le DIV "images" est display:none au démarrage

lors d'un clic sur une image de petit format pour afficher le grand format de l'image sélectionnée, le DIV "fermer_texte" devient display=inline, "table-images" devient display:none et "images" devient display: inline
et lors d'un clic sur l'image grand format le contraire est fait.

la fonction javascript

Code:

1
2
3
4
5
6
7
8
9
function voir(id){
	for (i = 1; i <= 15; i++)
	{
		document.getElementById(i).style.display = "none";
	}
	document.getElementById('table-images').style.display = "none";
	document.getElementById('fermer_texte').style.display = "inline";
	document.getElementById(id).style.display = "inline";
}

Je veux bien passer par CSS pour afficher toutes les photos en petits format mais merci de me donner une piste.

26/09/2015, 16h38
NoSmoking

Bonjour,
il te faut passer par du javascript pour réaliser une pseudo lightBox pour l'affichage de tes images.

Pour information une ID ne doit pas être un nombre http://www.w3.org/TR/1999/REC-html40...pes.html#h-6.2

Citation:

• ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").