Construction tableau en javascript et affichage d'image

Version imprimable

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:

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 ?

28/03/2013, 09h58
SpaceFrog

je serais passé par un cloneNode et un prechargement des images ...

En effet le cloneNode pourrait me permettre de simplifier mon code.
Pour ce qui est du préchargement d'image, j'ai ajouté ça :
Code:

1 2 3 4 5 6 7 8 9 10 // Preload image var img1Preload = new Image(); img1Preload.src = graphs[0].imgPath; var img2Preload = new Image(); img2Preload.src = graphs[1].imgPath; var img3Preload = new Image(); img3Preload.src = graphs[2].imgPath; var img4Preload = new Image(); img4Preload.src = graphs[3].imgPath;
avant le create table
et donc l'affectation des images devient

Code:

img0.setAttribute('src', img1Preload.src);

Le problème est que je ne sais pas si ça marche dans le sens où chez moi je n'ai jamais eu le problème. Du coup, je ne sais pas trop comment le tester

28/03/2013, 10h53
SpaceFrog

Code:

img0.src= img1Preload.src;
28/03/2013, 11h07
jbrasselet

OK merci. Je vais voir si je peux tester cela chez le client pour vérifier si cela fonctionne.

J'ai tenté autre chose car je ne m'en sortais pas. Je me suis basé sur cet article :
http://jqueryfordesigners.com/image-loading/

Seulement la première fois mon image ne se charge toujours pas.
Voici mon code :

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
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
 
// DISPLAY data for Dashboard or Query tabs
function displayData(jsonString, selectedTab) {
    var graphs = JSON.parse(jsonString);
 
    // MANAGE error
    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 {
        if (selectedTab == "dashboards") {
            document.getElementById('dashboards').innerHTML = '';
        }
        else {
            document.getElementById('queries').innerHTML = '';
        }
 
        // CREATE table
        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);
 
        // FIRST line : Display two titles
        var rowFirstTitle = document.createElement('tr');
        // FIRST column
        var colFirstTitle = document.createElement("td");
        colFirstTitle.style.textAlign = "center";
        // ADD Title
        colFirstTitle.appendChild(createTitle(graphs[0]));
 
        // SECOND column
        var colSecondTitle = document.createElement("td");
        colSecondTitle.style.textAlign = "center";
        // ADD Title
        colSecondTitle.appendChild(createTitle(graphs[1]));
        // ADD columns to first line
        rowFirstTitle.appendChild(colFirstTitle);
        rowFirstTitle.appendChild(colSecondTitle);
        tbody.appendChild(rowFirstTitle);
 
        // SECOND line : Display two image
        var rowFirstImg = document.createElement('tr');
        // FIRST column
        var colFirstImg = document.createElement("td");
        // ADD image
        colFirstImg.appendChild(createImage(graphs[0], 1, selectedTab));
        // SECOND column
        var colSecondImg = document.createElement("td");
        // ADD image
        colSecondImg.appendChild(createImage(graphs[1], 2, selectedTab));
 
        // ADD columns to second line
        rowFirstImg.appendChild(colFirstImg);
        rowFirstImg.appendChild(colSecondImg);
        tbody.appendChild(rowFirstImg);
 
        // ADD an empty line
        var emptyRow = document.createElement('tr');
        tbody.appendChild(emptyRow);
 
        // THIRD line : Display two titles
        var rowSecondTitle = document.createElement('tr');
        // FIRST column
        var colThirdTitle = document.createElement("td");
        colThirdTitle.style.textAlign = "center";
        // ADD Title
        colThirdTitle.appendChild(createTitle(graphs[2]));
        // SECOND column
        var colFourthTitle = document.createElement("td");
        colFourthTitle.style.textAlign = "center";
        // ADD Title
        colFourthTitle.appendChild(createTitle(graphs[3]));
        // ADD columns to third line
        rowSecondTitle.appendChild(colThirdTitle);
        rowSecondTitle.appendChild(colFourthTitle);
        tbody.appendChild(rowSecondTitle);
 
        // FOURTH line : Display two images
        var rowFirstImg = document.createElement('tr');
        // FIRST COLUMN
        var colFirstImg = document.createElement("td");
        // ADD image
        colFirstImg.appendChild(createImage(graphs[2], 3, selectedTab));
        // SECOND column
        var colSecondImg = document.createElement("td");
        // ADD image
        colSecondImg.appendChild(createImage(graphs[3], 4, selectedTab));
        // ADD columns to fourth line
        rowFirstImg.appendChild(colFirstImg);
        rowFirstImg.appendChild(colSecondImg);
        tbody.appendChild(rowFirstImg);
 
        if (selectedTab == "dashboards") {
            document.getElementById('dashboards').appendChild(table);
        }
        else {
            document.getElementById('queries').appendChild(table);
        }
 
        LoadImages(graphs, selectedTab);
    }
}
 
// CHANGE width (max=350)
function reduceWidthSize(value) {
    if (value > 350)
        return 350;
    else
        return value;
}
 
// CHANGE height (max=262)
function reduceHeightSize(value) {
    if (value > 262)
        return 262;
    else
        return value;
}
 
// CREATE a title link
function createTitle(graph) {
    var title = document.createElement("a");
    title.innerText = graph.name;
    if (graph.url != "") {
        title.setAttribute('href', graph.url);
        title.setAttribute('target', "_blank");
    }
    return title;
}
 
function createImage(graph, indice, selectedTab) {
    var div = document.createElement("div");
    div.setAttribute("id", selectedTab + indice);
    div.style.width = 350;
    div.style.height = 262;
    div.style.textAlign = "center";
    div.style.verticalAlign = "middle";
    div.style.backgroundImage = "url(/imgdbtools/ajax-loader.gif)";
    div.style.backgroundRepeat = "no-repeat";
    div.style.backgroundPosition = "center";
    if (graph.imgPath != "") {
        div.style.cursor = "pointer";
        div.setAttribute("onclick", function() { window.open( graph.imgPath ); });
    }
    return div;
}
 
 
function LoadImages(graphs, selectedTab) {
    // Preload image
    var img1Preload = new Image();
    var img2Preload = new Image();
    var img3Preload = new Image();
    var img4Preload = new Image();
 
    if (graphs != null) {
        $(img1Preload).load(function () {
            $('#' + selectedTab + "1").css("backgroundImage", "").append(this);
        }).error(function () {
            // notify the user that the image could not be loaded
        }).attr('src', graphs[0].imgPath).width(reduceWidthSize(img1Preload.width)).height(reduceHeightSize(img1Preload.height));
 
        $(img2Preload).load(function () {
            $('#' + selectedTab + "2").css("backgroundImage", "").append(this);
        }).error(function () {
            // notify the user that the image could not be loaded
        }).attr('src', graphs[1].imgPath).width(reduceWidthSize(img2Preload.width)).height(reduceHeightSize(img2Preload.height));
 
        $(img3Preload).load(function () {
            $('#' + selectedTab + "3").css("backgroundImage", "").append(this);
        }).error(function () {
            // notify the user that the image could not be loaded
        }).attr('src', graphs[2].imgPath).width(reduceWidthSize(img3Preload.width)).height(reduceHeightSize(img3Preload.height));
 
        $(img4Preload).load(function () {
            $('#' + selectedTab + "4").css("backgroundImage", "").append(this);
        }).error(function () {
            // notify the user that the image could not be loaded
        }).attr('src', graphs[3].imgPath).width(reduceWidthSize(img4Preload.width)).height(reduceHeightSize(img4Preload.height));
    }
}

J'ai ajouté une fonction qui créée mes divs contenant mes images (createImage)
chaque div possède un id afin que je puisse l'utiliser ensuite avec jquery.

Pour info, la fonction displayData est lancé sur l'action javascript sur un onglet (donc sans rechargement de la page). Peut-être st-ce du à cela ?

SI jamais vous avez une idée avant que je ne devienne chauve :)

28/03/2013, 15h18
jbrasselet

J'ai un peu avancé.
Si j'enlève les fonctions de resize sur mon jquery, je n'ai plus de problème.

Seulement j'aimerais une taille max pour mes images et les redimensionner si elles sont plus grandes. Je continue mes recherches sur ce sujet

J'ai réussi en modifiant l'ordre des commandes jquery

Code:

1
2
3
4
5
6
7
8
9
 
$(img1Preload).attr('src', graphs[0].imgPath + "?" + new Date().getTime()).attr('id', 'testjbt');
        $(img1Preload).load(function () {
            $('#' + selectedTab + "1").css("backgroundImage", "").append(this);
            this.width = reduceWidthSize(this.width);
            this.height = reduceHeightSize(this.height);
        }).error(function () {
            // notify the user that the image could not be loaded
        });

Sauvé :mrgreen:

salut,

tu utilises une var par image ?

Code:

1
2
3
4
5
 
        var img1Preload = new Image();
        img1Preload.src = graphs[0].imgPath;
        var img2Preload = new Image();
        img2Preload.src = ........;

ca serait plus simple de toutes les mettre dans un tableau et de bosser avec :

Code:

1
2
3
4
5
6
7
8
9
var tbImg = ['img1.png', 'img2.png', 'img3.png'];
function precharger(tbImg) {
		var images = [];
		for (var i = 0; i < tbImg.length; i++) {
				images[i] = new Image();
				images[i].src = tbImg[i];
		}
}
precharger(tbImg);

meme remarque pour toutes les actions communes sur les images

28/03/2013, 16h29
jbrasselet

Oui oui il y a en effet des optimisations à faire je te l'accorde :)
C'est la prochaine étape :ccool: