Bonjour,

sur une page web, j'appelle un web service qui me renvoit un objet json contenant 4 url et 4 image
Le but est d'afficher un tableau qui ressemble à ça :
| url1 | url2 |
| img1 | img2 |
| url3 | url4 |
| img3 | img4 |

Mon code actuel est la suivant :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
 
function displayData(jsonString, selectedTab){
    var graphs = JSON.parse( jsonString );
 
    if(graphs[0].name=="Error in graph generation")
    {
        var today = new Date();
        var txtError = document.createElement('a');
        txtError.innerText = today.toString() + " - An unexpected error has happened. Please contact your administrator./Une erreur inattendue est survenue. Contactez votre administrateur.";
 
        if (selectedTab=="dashboards")
        {
            document.getElementById('dashboards').innerHTML = '';
            document.getElementById('dashboards').appendChild(txtError);
        }
        else
        {
            document.getElementById('queries').innerHTML = '';
            document.getElementById('queries').appendChild(txtError);
        }
    }
    else
    {
        var table = document.createElement('table');
        table.cellSpacing = "10";
 
        var thead = document.createElement('thead');
        table.appendChild(thead);
 
        var tbody = document.createElement('tbody');
        table.appendChild(tbody);
 
        var graphs = JSON.parse( jsonString );
 
        //Première ligne du tableau : titre des deux premieres miniatures
        var rowFirstTitle = document.createElement('tr');
        //Première colonne
        var colFirstTitle = document.createElement("td");
        colFirstTitle.style.textAlign = "center";
        //Ajout du titre
        var href0=document.createElement("a");
        href0.innerText = graphs[0].name;
        if (graphs[0].url != "")
        {
            href0.setAttribute('href', graphs[0].url);
            href0.setAttribute('target', "_blank");
        }
        colFirstTitle.appendChild(href0);
        //Seconde colonne
        var colSecondTitle = document.createElement("td");
        colSecondTitle.style.textAlign = "center";
        //Ajout du titre
        var href1=document.createElement("a");
        href1.innerText = graphs[1].name;
        if (graphs[1].url != "")
        {
            href1.setAttribute('href', graphs[1].url);
            href1.setAttribute('target', "_blank");
        }
        colSecondTitle.appendChild(href1);
        //Ajout des deux colonnes à la ligne
        rowFirstTitle.appendChild(colFirstTitle);
        rowFirstTitle.appendChild(colSecondTitle);
        tbody.appendChild(rowFirstTitle);
 
        //Seconde ligne du tableau : images des deux premieres miniatures
        var rowFirstImg = document.createElement('tr');
        //Première colonne
        var colFirstImg = document.createElement("td");
        //Ajout de l'image
        var img0=document.createElement("img");
        img0.setAttribute('src', graphs[0].imgPath);
        img0.width = reduceWidthSize(img0.width);
        img0.height = reduceHeightSize(img0.height);
        img0.border = 0;
        //Ajout du lien sur l'image
        if (graphs[0].imgPath != "")
        {
            var hrefimg0=document.createElement("a");
            hrefimg0.setAttribute('href', graphs[0].imgPath);
            hrefimg0.setAttribute('target', "_blank");
            hrefimg0.appendChild(img0);
            colFirstImg.appendChild(hrefimg0);
        }
        else //Si pas de miniature, on ajoute juste l'image
        {
            colFirstImg.appendChild(img0);
        }
        //Seconde colonne
        var colSecondImg = document.createElement("td");
        //Ajout de l'image
        var img1=document.createElement("img");
        img1.setAttribute('src', graphs[1].imgPath);
        img1.width = reduceWidthSize(img1.width);
        img1.height = reduceHeightSize(img1.height);
        img1.border = 0;
        //Ajout du lien sur l'image
        if (graphs[1].imgPath != "")
        {
            var hrefimg1=document.createElement("a");
            hrefimg1.setAttribute('href', graphs[1].imgPath);
            hrefimg1.setAttribute('target', "_blank");
            hrefimg1.appendChild(img1);
            colSecondImg.appendChild(hrefimg1);
        }
        else //Si pas de miniature, on ajoute juste l'image
        {
            colSecondImg.appendChild(img1);
        }
        //Ajout des deux colonnes à la ligne
        rowFirstImg.appendChild(colFirstImg);
        rowFirstImg.appendChild(colSecondImg);
        tbody.appendChild(rowFirstImg);
 
        //Ligne pour faire un espace vide
        var emptyRow = document.createElement('tr');
        tbody.appendChild(emptyRow);
 
        //Troisième ligne du tableau : titre des deux dernieres miniatures
        var rowSecondTitle = document.createElement('tr');
        //Première colonne
        var colThirdTitle = document.createElement("td");
        colThirdTitle.style.textAlign = "center";
        //Ajout du titre
        var href2=document.createElement("a");
        href2.innerText = graphs[2].name;
        if (graphs[2].url != "")
        {
            href2.setAttribute('href', graphs[2].url);
            href2.setAttribute('target', "_blank");
        }
        colThirdTitle.appendChild(href2);
        //Seconde colonne
        var colFourthTitle = document.createElement("td");
        colFourthTitle.style.textAlign = "center";
        //Ajout du titre
        var href3=document.createElement("a");
        href3.innerText = graphs[3].name;
        if (graphs[3].url != "")
        {
            href3.setAttribute('href', graphs[3].url);
            href3.setAttribute('target', "_blank");
        }
        colFourthTitle.appendChild(href3);
        //Ajout des deux colonnes à la ligne
        rowSecondTitle.appendChild(colThirdTitle);
        rowSecondTitle.appendChild(colFourthTitle);
        tbody.appendChild(rowSecondTitle);
 
        //Quatrième ligne du tableau : image des deux dernieres miniatures
        var rowFirstImg = document.createElement('tr');
        //Première colonne
        var colFirstImg = document.createElement("td");
        //Ajout de l'image
        var img2=document.createElement("img");
        img2.setAttribute('src', graphs[2].imgPath);
        img2.width = reduceWidthSize(img2.width);
        img2.height = reduceHeightSize(img2.height);
        img2.border = 0;
        //Ajout du lien sur l'image
        if (graphs[2].imgPath != "")
        {
            var hrefimg2=document.createElement("a");
            hrefimg2.setAttribute('href', graphs[2].imgPath);
            hrefimg2.setAttribute('target', "_blank");
            hrefimg2.appendChild(img2);
            colFirstImg.appendChild(hrefimg2);
        }
        else //Si pas de miniature, on ajoute juste l'image
        {
            colFirstImg.appendChild(img2);
        }
        //Seconde colonne
        var colSecondImg = document.createElement("td");
        //Ajout de l'image
        var img3=document.createElement("img");
        img3.setAttribute('src', graphs[3].imgPath);
        img3.width = reduceWidthSize(img3.width);
        img3.height = reduceHeightSize(img3.height);
        img3.border = 0;
        //Ajout du lien sur l'image
        if (graphs[3].imgPath != "")
        {
            var hrefimg3=document.createElement("a");
            hrefimg3.setAttribute('href', graphs[3].imgPath);
            hrefimg3.setAttribute('target', "_blank");
            hrefimg3.appendChild(img3);
            colSecondImg.appendChild(hrefimg3);
        }
        else //Si pas de miniature, on ajoute juste l'image
        {
            colSecondImg.appendChild(img3);
        }
        //Ajout des deux colonnes à la ligne
        rowFirstImg.appendChild(colFirstImg);
        rowFirstImg.appendChild(colSecondImg);
        tbody.appendChild(rowFirstImg);
 
        if (selectedTab=="dashboards")
        {
            document.getElementById('dashboards').innerHTML = '';
            document.getElementById('dashboards').appendChild(table);
        }
        else
        {
            document.getElementById('queries').innerHTML = '';
            document.getElementById('queries').appendChild(table);
        }
    }
}
 
//Fonction qui réduit la taille (hauteur ou largeur) de l'image
//si celle-ci dépasse 350px pour la largeur et 262 pour la hauteur
function reduceWidthSize(value){
    if (value > 350)
        return 350;
    else
        return value;
}
 
function reduceHeightSize(value){
    if (value > 262)
        return 262;
    else
        return value;
}

Le client me remonte un souci : au premier chargement de la page les images n'apparaissent pas.
Je cherche donc un moyen pour être sur que les images vont s'afficher du premier coup. Auriez-vous une idée ?