Exécution d'un script sur tablette

**ITSCOLLASPE** · 13/03/2018, 10h38

Bonjour. (Je suis nouveau sur ce forum)
Mise en situation :
Je réalise, actuellement, un site internet. Sur ce site, une section "véhicule" apparait. dans cette section, les utilisateurs ont des photos d'un véhicule (le leur) sous toutes les coutures. Ils peuvent cliquer à des endroits des images pour créer un point rouge, permettant de signaler differents problèmes (par-brise fisuré, portière rayé).

Fonctionnement :
les images sont affichés sur le site. Le script JS suivant genere des calques par dessus les images et les utilisateurs peuvent cliquer sur ces calques et cela creer un point, qui s'affiche.

Problème :
Mon script s'execute a merveille sur le PC. Les points s'affichent. Par contre, sur tablette, rien ne va. Les points s'affichent 1 fois sur 5, je suis obligé de refresh la page 4-5 fois de temps en temps. C'est essentiel que ce script fonctionne sur tablette, voilà pourquoi je poste ce sujet. Quand l'utilisateur creer son point, il s'affiche, ce point s'envoit dans la base de données. par contre, si on refresh la page, le point n'apparait pas forcement, alors qu'il devrait apparaitre ! Mon code est-il bien optimisé ? Ai-je des fautes dans mon code ? N'ai-je pas la bonne technique ?
Merci de vos futures reponses.

Voici le code du script :

Code :

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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
 
$(document).ready(function()
{
  var vehicule = $(".hidden").val();
  window.addEventListener("resize", function()
  {
    $(".coup").remove();
    var position = $("img.ar").position();
    $(".artrans").css( { top: position.top + 'px', left: position.left + 'px', } );
    var position = $("img.av").position();
    $(".avtrans").css( { top: position.top + 'px', left: position.left + 'px', } );
    var position = $("img.g").position();
    $(".gtrans").css( { top: position.top + 'px', left: position.left + 'px', } );
    var position = $("img.d").position();
    $(".dtrans").css( { top: position.top + 'px', left: position.left + 'px', } );
    var position = $("img.int1").position();
    $(".int1trans").css( { top: position.top + 'px', left: position.left + 'px', } );
    var position = $("img.int2").position();
    $(".int2trans").css( { top: position.top + 'px', left: position.left + 'px', } );
    var position = $("img.int3").position();
    $(".int3trans").css( { top: position.top + 'px', left: position.left + 'px', } );
 
    $.ajax(
    {
      url : 'charger_coup.php',
      type : 'GET',
      data : 'vehicule=' + vehicule,
      dataType : 'html',
      success : function(code_html, statut)
      {
        $(code_html).appendTo("head");
      }
    });
 
    $(".outils tbody").html
 
("<tr><th>Numéro</th><th>Déclarant</th><th>Date</th><th>Suppression</th></tr>");
  }, false); // Si on redimensionne la page on reajuste les calques transparents
 
  $("img.d").resize(function()
  {
    var hauteur = $(this).height();
    $('<div class="artrans"></div>').css( { width: $("img.ar").width(), height: hauteur + 'px' } );
  });
  $(window).on('load', function()
  {
    $.ajax(
      {
        url : 'charger_coup.php',
        type : 'GET',
        data : 'vehicule=' + vehicule,
        dataType : 'html',
        success : function(code_html, statut)
        {
          $(code_html).appendTo("head");
        },
      });
 
  });
 
$("img.d").on('load', function()
{
  var hauteur = $(this).height();
  var position = $("img.d").position();
  $(".d img").parent().append( $('<div class="dtrans"></div>').css(
  {
        position: 'absolute',
        top: position.top + 'px',
        left: position.left + 'px',
        width: $("img.d").width(),
        height: hauteur + 'px'
  })
  );
});
 
$("img.g").on('load', function()
{
  var hauteur = $(this).height();
  var position = $("img.g").position();
  $(".g img").parent().append( $('<div class="gtrans"></div>').css(
  {
      position: 'absolute',
      top: position.top + 'px',
      left: position.left + 'px',
      width: $("img.g").width(),
      height: hauteur + 'px'
  })
  );
});
 
$("img.int1").on('load', function()
{
  var hauteur = $(this).height();
  var position = $("img.int1").position();
  $(".int1 img").parent().append(
    $('<div class="int1trans"></div>').css(
    {
      position: 'absolute',
      top: position.top + 'px',
      left: position.left + 'px',
      width: $("img.int1").width(),
      height: hauteur + 'px'
    })
  );
});
 
$("img.int2").on('load', function()
{
  var hauteur = $(this).height();
  var position = $("img.int2").position();
  $(".int2 img").parent().append(
    $('<div class="int2trans"></div>').css(
    {
      position: 'absolute',
      top: position.top + 'px',
      left: position.left + 'px',
      width: $("img.int2").width(),
      height: hauteur + 'px'
    })
  );
});
 
$("img.int3").on('load', function()
{
  var hauteur = $(this).height();
  var position = $("img.int3").position();
  $(".int3 img").parent().append(
    $('<div class="int3trans"></div>').css(
    {
      position: 'absolute',
      top: position.top + 'px',
      left: position.left + 'px',
      width: $("img.int3").width(),
      height: hauteur + 'px'
    })
  );
});
 
$("img.av").on('load', function()
{
  var hauteur = $(this).height();
  var position = $("img.av").position();
  $(".av img").parent().append(
    $('<div class="avtrans"></div>').css(
    {
      position: 'absolute',
      top: position.top + 'px',
      left: position.left + 'px',
      width: $("img.av").width(),
      height: hauteur + 'px'
    })
  );
});
 
$("img.ar").on('load', function()
{
  var hauteur = $(this).height();
  var position = $("img.ar").position();
  $(".ar img").parent().append(
    $('<div class="artrans"></div>').css(
    {
      position: 'absolute',
      top: position.top + 'px',
      left: position.left + 'px',
      width: $("img.ar").width(),
      height: hauteur + 'px'
    })
  );
});
 
  $("div.ar").click(function (ev)
  {
    var vehicule = $(".hidden").val();
    var offset = $(this).offset();
    var vehicule = $(".hidden").val();
    var relativeX = (ev.pageX - offset.left);
    var posX = relativeX/$("img.ar").width()*100;
    var relativeY = (ev.pageY - offset.top);
    var posY = relativeY/$("img.ar").height()*100;
    $(".position").val("afaf");
    if (posX<100&&posY<100)
    {
      $(".artrans").append(
        $('<div class="coup"></div>').css(
        {
          position: 'absolute',
          top: posY + '%',
          left: posX + '%',
          width: '10px',
          height: '10px',
          background: '#FF0000'
        })
      );
      $.ajax(
      {
        url : 'ajout_coup.php',
        type : 'GET',
        data : 'posX=' + posX + '&posY=' + posY + '&vehicule=' + vehicule + '&loc=' + 'ar'
      });
    }
  });
 
  $("div.av").click(function (ev)
  {
    var offset = $(this).offset();
    var relativeX = (ev.pageX - offset.left);
    var posX = relativeX/$("img.av").width()*100;
    var relativeY = (ev.pageY - offset.top);
    var posY = relativeY/$("img.av").height()*100;
    $(".position").val("afaf");
    if (posX<100&&posY<100)
    {
      $(".avtrans").append(
        $('<div class="coup"></div>').css(
        {
          position: 'absolute',
          top: posY + '%',
          left: posX + '%',
          width: '10px',
          height: '10px',
          background: '#FF0000'
        })
      );
      var vehicule = $(".hidden").val();
      $.ajax(
      {
        url : 'ajout_coup.php',
        type : 'GET',
        data : 'posX=' + posX + '&posY=' + posY + '&vehicule=' + vehicule + '&loc=' + 'av'
      });
    }
  });
  $("div.d").click(function (ev)
  {
    var offset = $(this).offset();
    var relativeX = (ev.pageX - offset.left);
    var posX = relativeX/$("img.d").width()*100;
    var relativeY = (ev.pageY - offset.top);
    var posY = relativeY/$("img.d").height()*100;
    $(".position").val("afaf");
    if (posX<100&&posY<100)
    {
      $(".dtrans").append(
        $('<div class="coup"></div>').css(
        {
          position: 'absolute',
          top: posY + '%',
          left: posX + '%',
          width: '10px',
          height: '10px',
          background: '#FF0000'
        })
      );
      var vehicule = $(".hidden").val();
      $.ajax(
      {
        url : 'ajout_coup.php',
        type : 'GET',
        data : 'posX=' + posX + '&posY=' + posY + '&vehicule=' + vehicule + '&loc=' + 'd'
      });
    }
  });
  $("div.g").click(function (ev)
  {
    var offset = $(this).offset();
    var relativeX = (ev.pageX - offset.left);
    var posX = relativeX/$("img.g").width()*100;
    var relativeY = (ev.pageY - offset.top);
    var posY = relativeY/$("img.g").height()*100;
    $(".position").val("afaf");
    if (posX<100&&posY<100)
    {
      $(".gtrans").append(
        $('<div class="coup"></div>').css(
        {
          position: 'absolute',
          top: posY + '%',
          left: posX + '%',
          width: '10px',
          height: '10px',
          background: '#FF0000'
        })
      );
      var vehicule = $(".hidden").val();
      $.ajax(
      {
        url : 'ajout_coup.php',
        type : 'GET',
        data : 'posX=' + posX + '&posY=' + posY + '&vehicule=' + vehicule + '&loc=' + 'g'
      });
    }
  });
  $("div.int1").click(function (ev)
  {
    var offset = $(this).offset();
    var relativeX = (ev.pageX - offset.left);
    var posX = relativeX/$("img.int1").width()*100;
    var relativeY = (ev.pageY - offset.top);
    var posY = relativeY/$("img.int1").height()*100;
    $(".position").val("afaf");
    if (posX<100&&posY<100)
    {
      $(".int1trans").append(
        $('<div class="coup"></div>').css(
        {
          position: 'absolute',
          top: posY + '%',
          left: posX + '%',
          width: '10px',
          height: '10px',
          background: '#FF0000'
        })
      );
      var vehicule = $(".hidden").val();
      $.ajax(
      {
        url : 'ajout_coup.php',
        type : 'GET',
        data : 'posX=' + posX + '&posY=' + posY + '&vehicule=' + vehicule + '&loc=' + 'int1'
      });
    }
  });
  $("div.int2").click(function (ev)
  {
    var offset = $(this).offset();
    var relativeX = (ev.pageX - offset.left);
    var posX = relativeX/$("img.int2").width()*100;
    var relativeY = (ev.pageY - offset.top);
    var posY = relativeY/$("img.int2").height()*100;
    $(".position").val("afaf");
    if (posX<100&&posY<100)
    {
      $(".int2trans").append(
        $('<div class="coup"></div>').css(
        {
          position: 'absolute',
          top: posY + '%',
          left: posX + '%',
          width: '10px',
          height: '10px',
          background: '#FF0000'
        })
      );
      var vehicule = $(".hidden").val();
      $.ajax(
      {
        url : 'ajout_coup.php',
        type : 'GET',
        data : 'posX=' + posX + '&posY=' + posY + '&vehicule=' + vehicule + '&loc=' + 'int2'
      });
    }
  });
 
  $("div.int3").click(function (ev)
  {
    var vehicule = $(".hidden").val();
    var offset = $(this).offset();
    var relativeX = (ev.pageX - offset.left);
    var posX = relativeX/$("img.int3").width()*100;
    var relativeY = (ev.pageY - offset.top);
    var posY = relativeY/$("img.int3").height()*100;
    $(".position").val("afaf");
    if (posX<100&&posY<100)
    {
      $(".int3trans").append(
        $('<div class="coup"></div>').css({
          position: 'absolute',
          top: posY + '%',
          left: posX + '%',
          width: '10px',
          height: '10px',
          background: '#FF0000'
        })
      );
      $.ajax(
      {
        url : 'ajout_coup.php',
        type : 'GET',
        data : 'posX=' + posX + '&posY=' + posY + '&vehicule=' + vehicule + '&loc=' + 'int3'
      });
    }
  });
 
 
  function reload()
  {
      $(window).trigger('resize');
  }
  setInterval(reload,5000);
});

**Marco46** · 13/03/2018, 11h33

Ce qui compte c'est le navigateur pas le système.

Dans quel navigateur fais-tu tes tests sur desktop, sur quel navigateur sur tablette ?

Le problème avec le mobile c'est que souvent les constructeurs modifient légèrement le navigateur qu'ils embarquent.

Pour véritablement debug sur ta tablette, il va falloir la brancher sur ta machine et utiliser des outils qui permettront d'afficher sur ta machine de travail la console de debug, les flux http, le DOM etc ...

C'est facile à trouver via Google.

**ITSCOLLASPE** · 13/03/2018, 11h44

Bonjour, tout d'abord merci d'avoir pris du temps pour essayer de m'aider.

Sur le desktop, j'utilise le navigateur chrome, et sur la tablette de même. Je ne sais pas si il y a de modifications sur la version tablette.

D'accord, je vais essayé ça ! Je n'en connais pas donc je vais voir sur Google.

**danielhagnoul** · 13/03/2018, 12h30

Touche F12 et clic sur l'icône Mobile (à gauche), ensuite choisir le type et la taille et l'orientation de l'écran. N'oubliez pas de cliquer sur le bouton "actualiser" du navigateur, c'est très important.

Vous disposez ainsi de toute la panoplie des outils développeurs de Chrome.

Rien ne remplacera le test sur un vrai mobile, mais c'est un très bon début.

**ITSCOLLASPE** · 13/03/2018, 13h11

Bonjour,

Je connais déjà cette technique et je l'utilise déjà très souvent, je code avec l'outil de développement Google. Au niveau de l'affichage grâce à cette méthode, je n'ai aucun soucis. Peut importe le mobile choisi. Par contre lorsque je passe sur une vraie tablette, j'ai des points manquants voire le non affichage de tout mes points.

**Watilin** · 13/03/2018, 19h40

Envoyé par ITSCOLLASPE

Bonjour. (Je suis nouveau sur ce forum)

Bonjour et bienvenue

Je vais apporter un début de réponse à cette question :

Mon code est-il bien optimisé ?

J’attire ton attention sur tes différentes fonctions resize. L’évènement resize, un peu comme mousemove, peut être émis plusieurs centaines de fois par seconde. C’est une fréquence suffisamment élevée pour causer un « engorgement » du fil d’exécution JS, qui peut se traduire par un gel du navigateur.

En général ce qu’on veut faire avec un resize, c’est s’adapter aux nouvelles dimensions de la page une fois que le redimensionnement est terminé. Contrairement à mousemove, on n’a pas besoin de réagir en quasi temps réel à l’évènement.

Une technique est de temporiser (les anglophones utilisent le terme throttle) le traitement de l’évènement en utilisant un setTimeout. On se donne un délai, par exemple 250 ms (un quart de seconde), et tant qu’il y a des évènements resize émis à des intervalles plus courts que ce délai, on annule le précédent timer. La fonction temporisée n’est appelée que si le timer n’est pas annulé.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var throttleTimer;
window.addEventListener("resize", function () {
  clearTimeout(throttleTimer);
  throttleTimer = setTimeout(handleResize, 250);
});
 
function handleResize() {
  $(".coup").remove();
  // ...
  // ...
}

Au sein même de ta fonction, il y a d’autres points susceptibles d’être optimisés.

Il y a cet appel ajax. Il mériterait d’avoir son propre timer, de plusieurs secondes cette fois, voire plusieurs minutes, car je ne pense pas que les données du serveur soient mises à jour à une fréquence de 4 fois par seconde. En fait je me demande même s’il est nécessaire dans une fonction de resize.

Et puis il y a un truc un peu plus vicieux : les « allers-retours » avec le DOM. Comme expliqué dans cet article (en anglais), certaines instructions JavaScript nécessitent que le moteur d’affichage mette à jour son arbre de rendu (rendering tree). L’arbre de rendu est un peu comme l’arbre DOM, mais tient compte de certaines informations CSS, par exemple les éléments ayant le style display: none ne sont pas dedans car ils n’ont pas besoin d’être calculés pour l’affichage.

Une mise à jour de l’arbre de rendu est appelée reflow en anglais, et est nécessaire quand ton script demande une propriété du DOM relative à l’affichage, typiquement une position top, left ou une dimension width, height. Un reflow est également provoqué quand tu modifies ces mêmes propriétés d’affichage. En gros, l’accès en lecture et l’accès en écriture.

Le navigateur étant bien optimisé (du moins on espère), il sait quand économiser les reflows : l’arbre de rendu est marqué dirty quand il a besoin d’être redessiné ; tant qu’il reste propre, le moteur ne fait pas de reflow.

Quand un script modifie une propriété d’affichage, le marqueur dirty est positionné. Normalement, le navigateur attend que le fil d’exécution JS ne soit plus occupé avant de faire le reflow. Mais si ton script demande une propriété d’affichage alors que le marqueur dirty est présent, cela provoquera un reflow forcé.

Si ton script fait successivement une écriture, une lecture, une écriture, une lecture, etc., le moteur sera forcé de faire un grand nombre de reflows — un phénomène parfois appelé layout thrashing. Pour éviter ça, il faut grouper les accès en lecture ensemble, et de préférence avant les accès en écriture.
Dans ton script, ça demande un peu de réécriture parce que toutes tes variables position ont le même nom, mais c’est possible :

Code :

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
    var positionAr = $("img.ar").position();
    var positionAv = $("img.av").position();
    var positionG = $("img.g").position();
    var positionD = $("img.d").position();
    var positionInt1 = $("img.int1").position();
    var positionInt2 = $("img.int2").position();
    var positionInt3 = $("img.int3").position();
 
    $(".coup").remove();
    $(".artrans").css({
      top  : positionAr.top  + "px",
      left : positionAr.left + "px",
    });
    $(".avtrans").css({
      top  : positionAv.top  + "px",
      left : positionAv.left + "px",
    });
    $(".gtrans").css({
      top  : positionG.top  + "px",
      left : positionG.left + "px",
    });
    $(".dtrans").css({
      top  : positionD.top  + "px",
      left : positionD.left + "px",
    });
    $(".int1trans").css({
      top  : positionInt1.top  + "px",
      left : positionInt1.left + "px",
    });
    $(".int2trans").css({
      top  : positionInt2.top  + "px",
      left : positionInt2.left + "px",
    });
    $(".int3trans").css({
      top  : positionInt3.top  + "px",
      left : positionInt3.left + "px",
    });

Pour $(".coup").remove(), l’action de le retirer peut provoquer un reflow également, c’est pour ça que j’ai mis l’instruction à la fin.

Quand on travaille sur un grand projet avec plusieurs couches d’abstraction (jQuery en est une), il n’est pas toujours possible de réordonner les lectures et écritures de propriétés d’affichage. Heureusement, on n’est pas à court d’options : on peut garder en mémoire les propriétés modifiées dans des variables.

De manière générale, on n’utilise jamais trop de variables en JavaScript. Quand on débute, difficile de savoir quelle instruction va coûter cher en temps ou pas. Dès que tu as un bout de code qui se répète, même seulement deux fois, mets-le dans une variable et utilise une variable à la place. Si tu as peur des oublis de déclaration qui rendent une variable accidentellement globale, passe au mode strict, il n’est jamais trop tard

Pour d’autres petits conseils d’optimisation avec jQuery, voir learn.jquery.com/performance/.

**ITSCOLLASPE** · 14/03/2018, 08h35

Bonjour, merci pour cet accueil !
Je te remercie également pour tout ce temps que tu as pris à me transmettre tes connaissances sur ce sujet. Ne comprenant pas tout sur l'instant, je vais prendre le temps de relire le tout et essayer d'appliquer tous tes conseils. Je reviendrai ensuite poster un commentaire afin de montrer ce que j'ai réalisé, si ça fonctionne ou non, poser des questions si je n'ai pas compris certaines choses. Si je n'ai aucun soucis, je posterai la solution fonctionnant pour les prochaines personnes qui auront ce même soucis.

Encore merci pour ton aide !

**ITSCOLLASPE** · 19/03/2018, 15h53

Bonjour,

Je réponds assez longtemps après, ayant eu des contre-temps.

Voici mon code actuel :

Code :

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
$(document).ready(function(){
    let vehicule = $(".hidden").val();
    let throttleTimer;
 
    window.addEventListener('resize', function ()
    {
        clearTimeout(throttleTimer);
        throttleTimer = setTimeout(handleResize, 250);
    });
 
    function handleResize()
    {
        let positionAr = $("img.ar").position();
        let positionAv = $("img.av").position();
        let positionG = $("img.g").position();
        let positionD = $("img.d").position();
        let positionInt1 = $("img.int1").position();
        let positionInt2 = $("img.int2").position();
        let positionInt3 = $("img.int3").position();
 
        $(".coup").remove();
 
        $(".artrans").css({
            top: positionAr.top + 'px',
            left: positionAr.left + 'px',
        });
 
        $(".avtrans").css({
            top: positionAv.top + 'px',
            left: positionAv.left + 'px',
        });
 
        $(".gtrans").css({
            top: positionG.top + 'px',
            left: positionG.left + 'px',
        });
 
        $(".dtrans").css({
            top: positionD.top + 'px',
            left: positionD.left + 'px',
        });
 
        $(".int1trans").css({
            top: positionInt1.top + 'px',
            left: positionInt1.left + 'px',
        });
 
        $(".int2trans").css({
            top: positionInt2.top + 'px',
            left: positionInt2.left + 'px',
        });
 
        $(".int3trans").css({
            top: positionInt3.top + 'px',
            left: positionInt3.left + 'px',
        });
 
        $.ajax({
            url : 'charger_coup.php',
            type : 'GET',
            data : 'vehicule=' + vehicule,
            dataType : 'html',
            success : function(code_html, statut) {
                $(code_html).appendTo("head");
            }
        });
        $(".outils tbody").html("<tr><th>Numéro</th><th>Déclarant</th><th>Date</th><th>Suppression</th></tr>");
    }
 
    $("img.d").resize(function()
    {
        var hauteurResize = $(this).height();
        $('<div class="artrans"></div>').css(
            {
                width: $("img.ar").width(),
                height: hauteurResize + 'px'
            })
    });
 
    $(window).on('load', function()
    {//Ajout des points
        $.ajax({
            url : 'charger_coup.php',
            type : 'GET',
            data : 'vehicule=' + vehicule,
            dataType : 'html',
            success : function(code_html, statut)
            {
                $(code_html).appendTo("head");
            },
        });
 
    });
 
    $("img.ar").on('load', function()
    {
        var hauteurArriere = $(this).height();
        var positionArriere = $("img.ar").position();
        $(".ar img").parent().append(
            $('<div class="artrans"></div>').css(
                {
                position: 'absolute',
                top: positionArriere.top + 'px',
                left: positionArriere.left + 'px',
                width: $("img.ar").width(),
                height: hauteurArriere + 'px'
            })
        );
    });
 
    $("img.av").on('load', function()
    {
        var hauteurAvant = $(this).height();
        var positionAvant = $("img.av").position();
        $(".av img").parent().append(
            $('<div class="avtrans"></div>').css(
                {
                position: 'absolute',
                top: positionAvant.top + 'px',
                left: positionAvant.left + 'px',
                width: $("img.av").width(),
                height: hauteurAvant + 'px'
            })
        );
    });
 
    $("img.g").on('load', function()
    {
        var hauteurGauche = $(this).height();
        var positionGauche = $("img.g").position();
        $(".g img").parent().append(
            $('<div class="gtrans"></div>').css(
                {
                    position: 'absolute',
                    top: positionGauche.top + 'px',
                    left: positionGauche.left + 'px',
                    width: $("img.g").width(),
                    height: hauteurGauche + 'px'
                })
        );
    });
 
    $("img.d").on('load', function()
    {
        var hauteurDroite = $(this).height();
        var poisitionDroite = $("img.d").position();
        $(".d img").parent().append(
            $('<div class="dtrans"></div>').css(
                {
                    position: 'absolute',
                    top: poisitionDroite.top + 'px',
                    left: poisitionDroite.left + 'px',
                    width: $("img.d").width(),
                    height: hauteurDroite + 'px'
                })
        );
    });
 
    $("img.int1").on('load', function()
    {
        var hauteurInt1 = $(this).height();
        var positionInt1 = $("img.int1").position();
        $(".int1 img").parent().append(
            $('<div class="int1trans"></div>').css(
                {
                position: 'absolute',
                top: positionInt1.top + 'px',
                left: positionInt1.left + 'px',
                width: $("img.int1").width(),
                height: hauteurInt1 + 'px'
            })
        );
    });
    $("img.int2").on('load', function()
    {
        var hauteurInt2 = $(this).height();
        var positionInt2 = $("img.int2").position();
        $(".int2 img").parent().append(
            $('<div class="int2trans"></div>').css(
                {
                position: 'absolute',
                top: positionInt2.top + 'px',
                left: positionInt2.left + 'px',
                width: $("img.int2").width(),
                height: hauteurInt2 + 'px'
            })
        );
    });
 
 
    $("img.int3").on('load', function()
    {
        var hauteurInt3 = $(this).height();
        var positionInt3 = $("img.int3").position();
        $(".int3 img").parent().append(
            $('<div class="int3trans"></div>').css(
                {
                position: 'absolute',
                top: positionInt3.top + 'px',
                left: positionInt3.left + 'px',
                width: $("img.int3").width(),
                height: hauteurInt3 + 'px'
            })
        );
    });
 
    function reload()
    {
        $(window).trigger('resize');
    }
 
 
    setInterval(reload,5000);
});

J'ai de faibles améliorations, le 3/4 du temps sur la tablette ça fonctionne, néanmoins c'est pas du 100% de fonctionnement, je me retrouve avec soit un problème au niveau de la première image, c'est à dire que les points ne s'affichent pas sur (seulement) la première image, soit sur toutes les images les points ne s'affichent pas, ou soit tout simple ça fonctionne.

**Watilin** · 04/04/2018, 19h39

Salut,

je vais peut-être enfoncer des portes ouvertes, mais il me semble que personne n’a encore parlé de l’ordre des différents évènements de chargement, à savoir :

quand le DOM est prêt à être utilisé, DOMContentLoaded ;
quand toutes les ressources de la page (feuilles de style, iframes, images, etc.) sont changées, le load de window ;
quand une image charge, elle émet son propre load (ou error) indépendamment du reste.

L’onglet réseau de la console F12 indique DOMContentLoaded et le load de window s’il est ouvert au moment où tu charges la page.

Le .ready() de jQuery correspond à DOMContentLoaded. Quand les ressources sont déjà dans le cache, il est possible que les images émettent leur load avant DOMContentLoaded, et ainsi ta fonction est appelée trop tard : tu attaches les écouteurs de load après l’émission de ces évènements.

Tu peux faire une première amélioration en attachant le load de window à l’extérieur de la fonction .ready() :

Code :

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

1
2
3
4
5
6
7
$(window).on('load', function() {
  // ...
});
 
$(document).ready(function() {
  // ...
});

La seconde amélioration va porter sur les load des images. Là il faut bricoler un peu : il faut vérifier si l’image est déjà chargée (par exemple avec complete) avant d’attacher l’écouteur.

Code :

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
function onImageLoad($image) {
  // ... à compléter
}
 
$(document).ready(function() {
 
  //...
 
  var $imgAr = $("img.ar");
  if ($imgAr.prop("src") && $imgAr.prop("complete")) {
    onImageLoad($imgAr);
  }
  else {
    $imgAr.on("load", function () {
      onImageLoad($imgAr);
    });
  }
});

complete est une vieille propriété qui date de IE5, son support est largement répandu. Mais elle a l’inconvénient de retourner true également quand l’image n’a pas encore de src (si tu la crées dynamiquement), c’est pourquoi j’ai rajouté un test sur src dans le if.

Ça va t’obliger à factoriser (mettre en commun) les codes des différentes fonctions de load que tu avais et qui étaient similaires. Je te laisse le faire car je pense que c’est un exercice intéressant

Pour une détection peut-être plus robuste du chargement des images, tu peux utiliser ou regarder le code source du plugin imagesLoaded, qui utilise notamment la propriété naturalWidth.

La page de doc de l’élément <img> pourra peut-être t’intéresser également.

Et sinon, un détail : j’ai vérifié dans la doc, l’évènement resize ne concerne que window. Il en découle que les images ne sont pas concernées. Ainsi, cette partie de ton script :

Code :

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

1
2
3
4
5
6
7
8
$("img.d").resize(function () {
    var hauteurResize = $(this).height();
    $('<div class="artrans"></div>').css(
        {
            width: $("img.ar").width(),
            height: hauteurResize + 'px'
        })
});

est inutile et tu peux la retirer.

**ITSCOLLASPE** · 05/04/2018, 15h46

Bonjour !

Tout d'abord (je vais me répéter) je tiens à te dire merci, tu m'apportes énormément d'aides au niveau de mon travail, de mon apprentissage, et dans mon élargissement de connaissances (vu que j'en ai, pour l'instant, peu dans le domaine du WEB, et encore moins en JS). Grâce à toi, j'utilise dès à présent la section network de mon outil de développement du navigateur WEB qui permet de se rendre compte du temps de chargement que peuvent prendre les pages à charger, puis de chercher à optimiser son code afin d'avoir des temps de chargements réduits.
Grâce à toutes les pistes que tu m'as donné, j'ai ceci au niveau du code :

Code :

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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
$(window).on('load', function() {   //Ajout des points
    var vehicule = $(".hidden").val();
    $.ajax({
        url : 'charger_coup.php',
        type : 'GET',
        data : 'vehicule=' + vehicule,
        dataType : 'html',
        success : function(code_html, statut)
        {
            $(code_html).appendTo("head");
        },
    });
 
});
 
 
function onImageLoad($image) {
    //... à compléter
    var hauteur = $image.height();
    var position = $image.position();
    var widthr=$image.width();
    if(($image="img.ar")){
        $(".ar img").parent().append(
            $('<div class="artrans"></div>').css({
                position: 'absolute',
                top: hauteur.top + 'px',
                left: position.left + 'px',
                width: widthr,
                height: hauteur + 'px'
            })
        );
    }
    if(($image="img.av")){
        $(".av img").parent().append(
            $('<div class="avtrans"></div>').css({
                position: 'absolute',
                top: hauteur.top + 'px',
                left: position.left + 'px',
                width: widthr,
                height: hauteur + 'px'
            })
        );
    }
    if(($image="img.g")){
        $(".g img").parent().append(
            $('<div class="gtrans"></div>').css({
                position: 'absolute',
                top: hauteur.top + 'px',
                left: position.left + 'px',
                width: widthr,
                height: hauteur + 'px'
            })
        );
    }
    if(($image="img.d")){
        $(".d img").parent().append(
            $('<div class="dtrans"></div>').css({
                position: 'absolute',
                top: hauteur.top + 'px',
                left: position.left + 'px',
                width: widthr,
                height: hauteur + 'px'
            })
        );
    }
    if(($image="img.int1")){
        $(".int1 img").parent().append(
            $('<div class="int1trans"></div>').css({
                position: 'absolute',
                top: hauteur.top + 'px',
                left: position.left + 'px',
                width: widthr,
                height: hauteur + 'px'
            })
        );
    }
    if(($image="img.int2")){
        $(".int2 img").parent().append(
            $('<div class="int2trans"></div>').css({
                position: 'absolute',
                top: hauteur.top + 'px',
                left: position.left + 'px',
                width: widthr,
                height: hauteur + 'px'
            })
        );
    }
    if(($image="img.int3")){
        $(".int1 img").parent().append(
            $('<div class="int3trans"></div>').css({
                position: 'absolute',
                top: hauteur.top + 'px',
                left: position.left + 'px',
                width: widthr,
                height: hauteur + 'px'
            })
        );
    }
}
 
$(document).ready(function(){
    //declaration des variables
    var vehicule = $(".hidden").val();
    var throttleTimer;
    var $imgAr=$("img.ar");
    var $imgAv=$("img.av");
    var $imgG=$("img.g");
    var $imgD=$("img.d");
    var $imgInt1=$("img.int1");
    var $imgInt2=$("img.int2");
    var $imgInt3=$("img.int3");
    //Fonctions
    window.addEventListener('resize', function () {
        clearTimeout(throttleTimer);
        throttleTimer = setTimeout(handleResize, 250);
    });
 
 
    function handleResize() {
        var positionAr =$imgAr.position();
        var positionAv = $imgAv.position();
        var positionG = $imgG.position();
        var positionD = $imgD.position();
        var positionInt1 = $imgInt1.position();
        var positionInt2 = $imgInt2.position();
        var positionInt3 = $imgInt3.position();
 
        $(".coup").remove();
 
        $(".artrans").css({
            top: positionAr.top + 'px',
            left: positionAr.left + 'px',
        });
 
        $(".avtrans").css({
            top: positionAv.top + 'px',
            left: positionAv.left + 'px',
        });
 
        $(".gtrans").css({
            top: positionG.top + 'px',
            left: positionG.left + 'px',
        });
 
        $(".dtrans").css({
            top: positionD.top + 'px',
            left: positionD.left + 'px',
        });
 
        $(".int1trans").css({
            top: positionInt1.top + 'px',
            left: positionInt1.left + 'px',
        });
 
        $(".int2trans").css({
            top: positionInt2.top + 'px',
            left: positionInt2.left + 'px',
        });
 
        $(".int3trans").css({
            top: positionInt3.top + 'px',
            left: positionInt3.left + 'px',
        });
 
        $.ajax({
            url : 'charger_coup.php',
            type : 'GET',
            data : 'vehicule=' + vehicule,
            dataType : 'html',
            success : function(code_html, statut) {
                $(code_html).appendTo("head");
            }
        });
        $(".outils tbody").html("<tr><th>Numéro</th><th>Déclarant</th><th>Date</th><th>Suppression</th></tr>");
    }
 
    $imgAr.on('load', function() {
        var hauteurArriere = $(this).height();
        var positionArriere = $imgAr.position();
        $(".ar img").parent().append(
            $('<div class="artrans"></div>').css({
                    position: 'absolute',
                    top: positionArriere.top + 'px',
                    left: positionArriere.left + 'px',
                    width: $imgAr.width(),
                    height: hauteurArriere + 'px'
                })
        );
        if (!($imgAr.prop("src") && $imgAr.prop("complete"))){
            onImageLoad($imgAr);
        }
    });
 
    $imgAv.on('load', function() {
        var hauteurAvant = $(this).height();
        var positionAvant = $imgAv.position();
        $(".av img").parent().append(
            $('<div class="avtrans"></div>').css({
                    position: 'absolute',
                    top: positionAvant.top + 'px',
                    left: positionAvant.left + 'px',
                    width: $imgAv.width(),
                    height: hauteurAvant + 'px'
                })
        );
        if (!($imgAv.prop("src") && $imgAv.prop("complete"))){
            onImageLoad($imgAv);
        }
    });
 
    $imgG.on('load', function() {
        var hauteurGauche = $(this).height();
        var positionGauche = $imgG.position();
        $(".g img").parent().append(
            $('<div class="gtrans"></div>').css({
                    position: 'absolute',
                    top: positionGauche.top + 'px',
                    left: positionGauche.left + 'px',
                    width: $imgG.width(),
                    height: hauteurGauche + 'px'
                })
        );
        if (!($imgG.prop("src") && $imgG.prop("complete"))){
            onImageLoad($imgG);
        }
    });
 
    $imgD.on('load', function() {
        var hauteurDroite = $(this).height();
        var poisitionDroite = $imgD.position();
        $(".d img").parent().append(
            $('<div class="dtrans"></div>').css({
                    position: 'absolute',
                    top: poisitionDroite.top + 'px',
                    left: poisitionDroite.left + 'px',
                    width: $imgD.width(),
                    height: hauteurDroite + 'px'
                })
        );
        if (!($imgD.prop("src") && $imgD.prop("complete"))){
            onImageLoad($imgD);
        }
    });
 
    $imgInt1.on('load', function() {
        var hauteurInt1 = $(this).height();
        var positionInt1 = $imgInt1.position();
        $(".int1 img").parent().append(
            $('<div class="int1trans"></div>').css({
                    position: 'absolute',
                    top: positionInt1.top + 'px',
                    left: positionInt1.left + 'px',
                    width: $imgInt1.width(),
                    height: hauteurInt1 + 'px'
                })
        );
        if (!($imgInt1.prop("src") && $imgInt1.prop("complete"))){
            onImageLoad($imgInt1);
        }
    });
    $imgInt2.on('load', function() {
        var hauteurInt2 = $(this).height();
        var positionInt2 = $imgInt2.position();
        $(".int2 img").parent().append(
            $('<div class="int2trans"></div>').css({
                    position: 'absolute',
                    top: positionInt2.top + 'px',
                    left: positionInt2.left + 'px',
                    width: $imgInt2.width(),
                    height: hauteurInt2 + 'px'
                })
        );
        if (!($imgInt2.prop("src") && $imgInt2.prop("complete"))){
            onImageLoad($imgInt2);
        }
    });
 
 
    $imgInt3.on('load', function() {
        var hauteurInt3 = $(this).height();
        var positionInt3 = $imgInt3.position();
        $(".int3 img").parent().append(
            $('<div class="int3trans"></div>').css({
                    position: 'absolute',
                    top: positionInt3.top + 'px',
                    left: positionInt3.left + 'px',
                    width: $imgInt3.width(),
                    height: hauteurInt3 + 'px'
                })
        );
        if (!($imgInt3.prop("src") && $imgInt3.prop("complete"))){
            onImageLoad($imgInt3);
        }
    });
 
    /*if ($imgAr.prop("src") && $imgAr.prop("complete")) {
        imageLoaded($imgAr);
    }
    else{
        $imgAr.on("load", function () {
            onImageLoad($imgAr);
        });
    }*/
 
    function reload() {
        $(window).trigger('resize');
    }
 
    setInterval(reload,5000);
});

Au niveau du résultat : j'ai de l’amélioration niveau affichage de mes points sur tablette, ça fonctionne plus souvent qu'avant, mais c'est pas encore du 100% de réussite (notamment je n'ai presque plus de problème avec l'affichage des points sur la 1ere image, mais sur les autres images des fois les points n’apparaissent toujours pas; peut-être ai-je des fautes dans mon code et/ou j'ai oublié des choses).

Remarque :
Tu verras, dans mon code, j'ai mis en commentaire ceci :

Code :

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

1
2
3
4
5
6
7
8
   /*if ($imgAr.prop("src") && $imgAr.prop("complete")) {
        imageLoaded($imgAr);
    }
    else{
        $imgAr.on("load", function () {
            onImageLoad($imgAr);
        });
    }*/

Pourquoi ai-je mis ce code en commentaire ? Car lorsque je retire les commentaires, il me génère une 2ième fois les mêmes points sur l'image concerné, puis me génère les points EGALEMENT sur l'image qui suit celle qu'il doit traité. Je dois m'y prendre mal.
Néanmoins ça fonctionne toujours pas complément :-(
Je cherche encore à améliorer le code. Si quelqu'un (ou toi) a des remarque sur mon code à me faire, je ne suis pas contre ! :-)

**Watilin** · 05/04/2018, 22h08

Comme je ne sais pas ce que contient ce code_html que tu reçois par hasard, je suis obligé de faire des suppositions. Vu que tu l’ajoutes dans le <head>, et vu que ça doit agir sur la page, j’en ai conclu que c’était du code JavaScript.

Ce n’est pas forcément une mauvaise chose en soi ; mais pour la compréhension et la maintenance du code, c’est généralement mieux de ne faire passer que des données inertes par le réseau, et d’avoir tout le code présent dans le fichier .js dès le départ.

Dans tous les cas, je n’ai pas exactement compris pourquoi tes points étaient parfois chargés deux fois, mais je peux te suggérer quelques pistes pour nettoyer ton code.

Commençons par une erreur classique : le if piégé.

Code :

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

if ($image="img.ar") {

Il manque (au moins) un signe égal. Là où tu voulais faire une comparaison, le script fait en réalité une affectation : $image reçoit la valeur "img.ar", écrasant au passage sa valeur précédente. L’affectation renvoie ensuite la valeur "img.ar" qui est lue par le if, et comme ce n’est pas équivalent à false, le test est positif et la branche du if est exécutée.
Tes six if ont ce problème. Pour corriger ça, assure-toi qu’il y a bien deux signes égal, ou trois si tu veux faire des comparaisons strictes (c’est conseillé, car les conversions de type de la comparaison laxiste sont vraiment contre-intuitives, cf. ce fil).

Code :

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

if ($image === "img.ar") {

Même les plus chevronnés d’entre nous font encore cette erreur quand ils sont fatigués ou veulent aller trop vite. Pour se protéger contre ça, on peut adopter le style « Yoda conditions » quand c’est possible :

Code :

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

if ("img.ar" === $image) {

L’idée c’est de mettre un truc non modifiable à gauche, comme ça si tu n’as mis qu’un seul signe égal, ça va lever une erreur tout de suite, au lieu de rentrer dans le if et causer des tas de problèmes dont la source sera plus difficile à localiser.

Sur un autre plan, je ne crois pas que comparer l’objet $image à la chaîne "img.ar" soit ce que tu as voulu faire. Je pense que tu voulais plutôt vérifier que l’élément correspond au sélecteur CSS. La méthode jQuery .is() fait ça.

Code :

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

if ($image.is("img.ar")) {

Cela nous amène au point suivant : la factorisation. Je me suis probablement mal exprimé là-dessus, alors je vais l’expliquer plus en détails. Le principe est d’éliminer les répétitions (DRY, Don’t Repeat Yourself). Quand tu as des portions de code qui se ressemblent, il est souvent possible de mettre en variable les parties changeantes, et de mettre en commun le reste.

La première étape consiste donc à isoler les parties qui ne changent pas.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
if ($image.is( ... )) {
  $("... img").parent().append(
    $('<div class=" ... "></div>').css({
      position : 'absolute',
      top      : position.top + 'px',
      left     : position.left + 'px',
      width    : widthr,
      height   : hauteur + 'px'
    })
  );
}

(j’ai remplacé hauteur.top par position.top.)

À ce niveau là on a en quelques sortes un « template », un code avec des trous. Il faut trouver comment obtenir l’information qui nous permet de remplir les trous. En l’occurence il s’agit de la classe de l’image, qui peut être ".ar", ".av", ".g", etc.

Code :

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

var imageClass = $image.attr("class");

Note : pour rester simple je vais partir du principe qu’il n’y a pas d’autres classes sur tes images. S’il y en a d’autres c’est un peu plus compliqué mais ça peut se faire aussi.

On utilise la classe récupérée et on l’injecte dans les trous :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
if ($image.is(`img.${imageClass}`)) {
  $(`.${imageClass} img`).parent().append(
    $(`<div class="${imageClass}trans"></div>`).css({
      position : 'absolute',
      top      : position.top + 'px',
      left     : position.left + 'px',
      width    : widthr,
      height   : hauteur + 'px'
    })
  );
}

Là tu remarqueras sans doute que le if ne sert plus à rien, puisque l’image a forcément sa propre classe. On peut donc le retirer.

Au final, on a divisé à peu près par 6 la taille de la fonction onImageLoad !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function onImageLoad($image) {
  var hauteur  = $image.height();
  var position = $image.position();
  var widthr   = $image.width();
 
  $(`.${imageClass} img`).parent().append(
    $(`<div class="${imageClass}trans"></div>`).css({
      position : 'absolute',
      top      : position.top + 'px',
      left     : position.left + 'px',
      width    : widthr,
      height   : hauteur + 'px'
    })
  );
}

Et si la syntaxe des chaînes `` ne te plaît pas, tu peux toujours concaténer à l’ancienne :

Code :

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
function onImageLoad($image) {
  var hauteur  = $image.height();
  var position = $image.position();
  var widthr   = $image.width();
 
  $('.' + imageClass + ' img').parent().append(
    $('<div class="' + imageClass + 'trans"></div>').css({
    // variante : $('<div></div>').addClass(imageClass).css({
      position : 'absolute',
      top      : position.top + 'px',
      left     : position.left + 'px',
      width    : widthr,
      height   : hauteur + 'px'
    })
  );
}

Autre point à améliorer : de la gestion de load dans une fonction qui… Gère le load.

Code :

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
$imgAr.on('load', function() {
  var hauteurArriere = $(this).height();
  var positionArriere = $imgAr.position();
  $(".ar img").parent().append(
    $('<div class="artrans"></div>').css({
        position: 'absolute',
        top: positionArriere.top + 'px',
        left: positionArriere.left + 'px',
        width: $imgAr.width(),
        height: hauteurArriere + 'px'
      })
  );
  if (!($imgAr.prop("src") && $imgAr.prop("complete"))){
    onImageLoad($imgAr);
  }
});

Le if de ce bout de code peut se lire :
« si l’image n’est pas chargée, ajoute un écouteur de load dessus. »
Le problème c’est qu’on est déjà dans un écouteur de load, donc ce if est toujours négatif. Tu peux le retirer.

En fait, c’est plutôt la fonction toute entière que tu peux retirer puisqu’elle fait double emploi avec la onImageLoad qu’on a pris la peine de factoriser juste ci-dessus. Laisse ce if dans la fonction .ready, c’est là qu’il a sa place.

L’instant .ready (ou DOMContentLoaded) c’est le moment le plus tôt où tu as accès au DOM et où tu peux commencer à manipuler les éléments et attacher des écouteurs dessus. C’est à ce moment, et pas à un autre, que tu dois gérer le load des images. Assure-toi qu’il ne reste aucun bout de code de gestion du load des images dans le reste de ton script.

Code :

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
$(document).ready(function () {
 
  ...
 
  $(".outils tbody").html( ... );
 
  if ($imgAr.prop("src") && $imgAr.prop("complete")) {
    onImageLoad($imgAr);
  }
  else {
    $imgAr.on("load", function () {
      onImageLoad($imgAr);
    });
  }
 
  ...
 
  if ($imgInt3.prop("src") && $imgInt3.prop("complete")) {
    onImageLoad($imgInt3);
  }
  else {
    $imgInt3.on("load", function () {
      onImageLoad($imgInt3);
    });
  }
 
  ...
}

Et devine quoi ? C’est encore un truc qui peut se factoriser

Code :

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

1
2
3
4
5
6
7
8
9
10
11
  var imagesArray = [ $imgAr, $imgAv, $imgG, $imgD, $imgInt1, $imgInt2, $imgInt3 ];
  $(imagesArray).each(function (i, $img) {
    if ($img.prop("src") && $img.prop("complete")) {
      onImageLoad($img);
    }
    else {
      $img.on("load", function () {
        onImageLoad($img);
      });
    }
  });

En rédigeant ce post je me rends compte que j’ai commis une bourde dans le post précédent, c’est onImageLoad et pas imageLoaded, la fonction imageLoaded n’existe pas… J’éditerai pour corriger ça.

Voilà, j’espère que ça va t’aider à rendre ton code plus clair et à débusquer la cause des problèmes. Encore désolé pour l’erreur, comme quoi des fois y’en a qui arrivent à passer

**ITSCOLLASPE** · 06/04/2018, 09h56

Merci pour les conseils.
Au niveau du simple égal, je vais t'expliquer :
A la base j'avais mis "==" tout simplement car a la base je code beaucoup plus en langage de programmation logiciel (C++/C#) donc j'ai appliqué les mêmes règles de programmation que dans ces 2 langages. Mais le problème est venu de mon IDE : PHPStorm qui ne supportait pas que je mette 2 "=" du coup j'ai mis un simple pour pas qu'il me fasse d'erreurs. Puis en te lisant et en y réfléchissant c'est vrai que c'est bête car un simple égal permet l'attribution d'une valeur à une variable. Puis tu m'as appris ce triple "=" qui est "strict" est du coup je l'utiliserai dorénavant. Une astuce remarquable aussi, c'est de mettre le résultat de l’équité avant la variable (référence au : "img.ar"===$image) car c'est vrai que dans ce sens tu ne peux que te tromper ou qu'avoir raison. Ca me donne envie d'appliquer cette regle même dans mes futurs programmes !

J'ai appliqué tout ce que tu m'as dis, voici le code JS :

Code :

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
$(window).on('load', function() {   //Ajout des points
    var vehicule = $(".hidden").val();
    $.ajax({
        url : 'charger_coup.php',
        type : 'GET',
        data : 'vehicule=' + vehicule,
        dataType : 'html',
        success : function(code_html, statut)
        {
            $(code_html).appendTo("head");
        },
    });
});
 
 
function onImageLoad($image) {
    //declaration des variables
    var imageClass = $image.attr("class");
    var hauteur  = $image.height();
    var position = $image.position();
    var widthr   = $image.width();
    //Traitement
    $('.' + imageClass + ' img').parent().append(
        $('<div class="' + imageClass + 'trans"></div>').css({
            // variante : $('<div></div>').addClass(imageClass).css({
            position : 'absolute',
            top      : position.top + 'px',
            left     : position.left + 'px',
            width    : widthr,
            height   : hauteur + 'px'
        })
    );
}
 
$(document).ready(function() {
    //declaration des variables
    var vehicule = $(".hidden").val();
    var throttleTimer;
    var $imgAr=$("img.ar");
    var $imgAv=$("img.av");
    var $imgG=$("img.g");
    var $imgD=$("img.d");
    var $imgInt1=$("img.int1");
    var $imgInt2=$("img.int2");
    var $imgInt3=$("img.int3");
 
    //Fonctions
    window.addEventListener('resize', function () {
        clearTimeout(throttleTimer);
        throttleTimer = setTimeout(handleResize, 250);
    });
 
 
    function handleResize() {
        var positionAr =$imgAr.position();
        var positionAv = $imgAv.position();
        var positionG = $imgG.position();
        var positionD = $imgD.position();
        var positionInt1 = $imgInt1.position();
        var positionInt2 = $imgInt2.position();
        var positionInt3 = $imgInt3.position();
 
        $(".coup").remove();
 
        $(".artrans").css({
            top: positionAr.top + 'px',
            left: positionAr.left + 'px',
        });
 
        $(".avtrans").css({
            top: positionAv.top + 'px',
            left: positionAv.left + 'px',
        });
 
        $(".gtrans").css({
            top: positionG.top + 'px',
            left: positionG.left + 'px',
        });
 
        $(".dtrans").css({
            top: positionD.top + 'px',
            left: positionD.left + 'px',
        });
 
        $(".int1trans").css({
            top: positionInt1.top + 'px',
            left: positionInt1.left + 'px',
        });
 
        $(".int2trans").css({
            top: positionInt2.top + 'px',
            left: positionInt2.left + 'px',
        });
 
        $(".int3trans").css({
            top: positionInt3.top + 'px',
            left: positionInt3.left + 'px',
        });
 
        $.ajax({
            url : 'charger_coup.php',
            type : 'GET',
            data : 'vehicule=' + vehicule,
            dataType : 'html',
            success : function(code_html, statut) {
                $(code_html).appendTo("head");
            }
        });
        $(".outils tbody").html("<tr><th>Numéro</th><th>Déclarant</th><th>Date</th><th>Suppression</th></tr>");
 
        var imagesArray = [ $imgAr, $imgAv, $imgG, $imgD, $imgInt1, $imgInt2, $imgInt3 ];
        $(imagesArray).each(function (i, $img) {
            if ($img.prop("src") && $img.prop("complete")) {
                onImageLoad($img);
            }
            else {
                $img.on("load", function () {
                    onImageLoad($img);
                });
            }
        });
    }
 
    function reload() {
        $(window).trigger('resize');
    }
 
    setInterval(reload,5000);
});

Et voici mon code HTML/php (en référence au code_html) :

Code html :

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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Fiche expertise véhicule</title>
    <link rel="icon" href="img/favicon.ico" />
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/resa.css">
    <script src="js/jquery-3.2.0.min.js"></script>
    <script src="js/script.js"></script>
    <script src="js/minute.js"></script>
    <script src="js/affichagepoints-vehicule.js"></script>
    <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
</head>
<body>
<?php
include 'log.php';
include 'menu.php';
?>
<label>
    <input class="hidden" style='display:none;' value="<?php echo $_GET['plaque']; ?> "/>
</label>
 
 
<?php
if (!isset($_GET['plaque']))
{
    $list_vehicule=$db->prepare("SELECT * FROM `Vehicule` ORDER BY `Vehicule`.`plaque` ASC");
    $list_vehicule->execute();
    while ($data=$list_vehicule->fetch())
        echo '<div class="milieu"><p><a class="boutonchoix" href="./vehicule_rec.php?plaque='.$data['plaque'].'">'.$data['plaque'].'</a></p></div>';
}
else
{
    ?>
    <div class="ar">
        <p><img src="../vehicule/AR<?php echo $_GET['plaque'] ?>.jpg" class="ar" style="width:500px;"></p>
    </div>
 
    <div class="av">
        <p><img src="../vehicule/AV<?php echo $_GET['plaque'] ?>.jpg" class="av" style="width:500px;"></p>
    </div>
 
    <div class="g">
        <p><img src="../vehicule/G<?php echo $_GET['plaque'] ?>.jpg" class="g" style="width:500px;"></p>
    </div>
 
    <div class="d">
        <p><img src="../vehicule/D<?php echo $_GET['plaque'] ?>.jpg" class="d" style="width:500px;"></p>
    </div>
 
    <div class="int1">
        <p><img src="../vehicule/int1<?php echo $_GET['plaque'] ?>.jpg" class="int1" style="width:500px;"></p>
    </div>
 
    <div class="int2">
        <p><img src="../vehicule/int2<?php echo $_GET['plaque'] ?>.jpg" class="int2" style="width:500px;"></p>
    </div>
 
    <div class="int3">
        <p><img src="../vehicule/int3<?php echo $_GET['plaque'] ?>.jpg" class="int3" style="width:500px;"></p>
    </div>
 
    <table class='outils ar'>
        <thead>
        <h1>Coups arrière</h1>
        </thead>
        <tr>
            <th>Numéro</th>
            <th>Déclarant</th>
            <th>Date</th>
            <th>Suppression</th>
        </tr>
 
    </table>
    <table class='outils av'>
        <thead>
        <h1>Coups avant</h1>
        </thead>
        <tr>
            <th>Numéro</th>
            <th>Déclarant</th>
            <th>Date</th>
            <th>Suppression</th>
        </tr>
 
    </table>
 
    <table class='outils g'>
        <thead>
        <h1>Coups gauche</h1>
        </thead>
        <tr>
            <th>Numéro</th>
            <th>Déclarant</th>
            <th>Date</th>
            <th>Suppression</th>
        </tr>
 
    </table>
 
    <table class='outils d'>
        <thead>
        <h1>Coups droite</h1>
        </thead>
        <tr>
            <th>Numéro</th>
            <th>Déclarant</th>
            <th>Date</th>
            <th>Suppression</th>
        </tr>
 
    </table>
 
    <table class='outils int1'>
        <thead>
        <h1>Coups intérieur avant</h1>
        </thead>
        <tr>
            <th>Numéro</th>
            <th>Déclarant</th>
            <th>Date</th>
            <th>Suppression</th>
        </tr>
 
    </table>
 
    <table class='outils int2'>
        <thead>
        <h1>Coups intérieur arrière</h1>
        </thead>
        <tr>
            <th>Numéro</th>
            <th>Déclarant</th>
            <th>Date</th>
            <th>Suppression</th>
        </tr>
    </table>
    <table class='outils int3'>
        <thead>
        <h1>Coups banquette arrière</h1>
        </thead>
        <tr>
            <th>Numéro</th>
            <th>Déclarant</th>
            <th>Date</th>
            <th>Suppression</th>
        </tr>
 
    </table>
    <?php
    $select_fiche = $db->prepare('SELECT * FROM Fiche_vehicule WHERE vehicule = ?');
    $select_fiche->execute(array($_GET['plaque']));
    while ($data = $select_fiche->fetch())
    {
        $select_membre = $db->prepare('SELECT nom, prenom FROM Employes WHERE id = ?');
        $select_membre->execute(array($data['emetteur']));
        $select_membre=$select_membre->fetch();
        $select_membre=$select_membre[0]." ".$select_membre[1];
 
        //Gestion de la date
        $affichagedate = new DateTime($data['date_emission']);
        $resultdate_affichage = $affichagedate->format('d/m/Y');
 
 
        echo '<div class="line" id="line_'.$data['id'].'"><div class="lig">'.$select_membre."</div> <div class='lig'>".$resultdate_affichage."</div><div class='lig'><span class='caret'></span></div>".'</div>';
        $donnee = '<h1>Fiche expertise '.$data['vehicule'].' du '.$resultdate_affichage.'</h1><p>De : '.$select_membre.'</p>';
        echo '<div class="line_'.$data['id'].'" style="display:none;">';
        $donnee .= '<p>Kilométrage : '.$data['km'].'</p>';
        if ($data['pneuav']==0)
        {
            $donnee .= '<p>Pneus avant : mauvais état</p>';
        }
        else {
            $donnee .= '<p>Pneus avant : bon état</p>';
        }
        if ($data['pneuar']==0){
            $donnee .= '<p>Pneus arrière : mauvais état</p>';
        }
        else {
            $donnee .= '<p>Pneus arrière : bon état</p>';
        }
        if ($data['pneuar']==0){
            $donnee .= '<p>Pneus arrière : mauvais état</p>';
        }
        else {
            $donnee .= '<p>Pneus arrière : bon état</p>';
        }
        if ($data['pression']==0){
            $donnee .= '<p>Pressions des pneus : mauvaise</p>';
        }
        else {
            $donnee .= '<p>Pressions des pneus : bonne</p>';
        }
        if ($data['eclairage']==0){
            $donnee .= '<p>Eclairage : mauvais état</p>';
        }
        else {
            $donnee .= '<p>Eclairage : bon état</p>';
        }
        if ($data['essuiglace']==0){
            $donnee .= '<p>Essuie glace : mauvais état</p>';
        }
        else {
            $donnee .= '<p>Essuie glace : bon état</p>';
        }
        if ($data['parebrise']==0){
            $donnee .= '<p>Pare brise : mauvais état</p>';
        }
        else {
            $donnee .= '<p>Pare brise : bon état</p>';
        }
        if ($data['retroviseur']==0){
            $donnee .= '<p>Retroviseur : mauvais état</p>';
        }
        else {
            $donnee .= '<p>Retroviseur : bon état</p>';
        }
        if ($data['frein']==0){
            $donnee .= '<p>Freins : mauvais état</p>';
        }
        else {
            $donnee .= '<p>Freins : bon état</p>';
        }
        if ($data['direction']==0){
            $donnee .= '<p>Direction : mauvaise</p>';
        }
        else {
            $donnee .= '<p>Direction : bonne</p>';
        }
        if ($data['huile']==0){
            $donnee .= '<p>Niveau d\'huile : mauvais</p>';
        }
        else {
            $donnee .= '<p>Niveau d\'huile : bon</p>';
        }
        if ($data['refroidissement']==0){
            $donnee .= '<p>Niveau liquide de refroidissement : mauvais</p>';
        }
        else {
            $donnee .= '<p>Niveau liquide de refroidissement : bon</p>';
        }
        if ($data['triangle']==0){
            $donnee .= '<p>Triangle : manquant</p>';
        }
        else {
            $donnee .= '<p>Triangle : OK</p>';
        }
        if ($data['gilet']==0){
            $donnee .= '<p>Gilet de signalisation : manquant</p>';
        }
        else {
            $donnee .= '<p>Gilet de signalisation : OK</p>';
        }
        if ($data['ampoule']==0){
            $donnee .= '<p>Boite d\'ampoules : manquant</p>';
        }
        else {
            $donnee .= '<p>Boite d\'ampoules : OK</p>';
        }
        if ($data['cric']==0){
            $donnee .= '<p>Cric : manquant</p>';
        }
        else {
            $donnee .= '<p>Cric : OK</p>';
        }
        if ($data['manivelle']==0){
            $donnee .= '<p>Manivelle : manquant</p>';
        }
        else {
            $donnee .= '<p>Manivelle : OK</p>';
        }
        if ($data['roue']==0){
            $donnee .= '<p>Roue de secours : mauvais état</p>';
        }
        else {
            $donnee .= '<p>Roue de secours : bon état</p>';
        }
        $donnee .= '<p>commentaire : '.$data['commentaire'].'</p>';
        $donnee .= '<p>Actions correctives : '.$data['actions_correctives'].'</p>';
 
        //Gestion de la date
        $affichagedateinterieur = new DateTime($data['nettoyage_interieur']);
        $resultdateinterieur_affichage = $affichagedateinterieur->format('d/m/Y');
 
        $affichagedate_exterieur = new DateTime($data['nettoyage_exterieur']);
        $resultdateexterieur_affichage = $affichagedate_exterieur->format('d/m/Y');
 
        $donnee .='<p>Nettoyage interieur : '.$resultdateinterieur_affichage.'</p>';
        $donnee .='<p>Nettoyage exterieur : '.$resultdateexterieur_affichage.'</p>';
 
 
        echo '<form name="formulaire" id="formulaire" action="generer_pdf.php" method="post">
    <input type="hidden" name="donnee_pdf" value="'.$donnee.'"/>'.'<input type="hidden" name="num_chan" value="'.$data['vehicule'].'"/>'.'<input type="hidden" name="type" value="Fiche_expertise"/>'.'<input type="hidden" name="date_chan" value="'.$data['date_emission'].'"/>';
        echo ' <input type="submit" class="bouton" value="Exporter en pdf"/>
    </form>';
        echo '</div>';
    }
}
$db->exec('UPDATE Coup_vehicule SET couleur = \'green\' WHERE date_coup !=DATE(NOW())'); //Changement de la couleur si date différente de celle du jour.
?>
 
</body>
</html>

charger_coup.php

Code php :

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
<?php
include 'connexionBDD.php';
$get_coup = $db->prepare('SELECT * FROM Coup_vehicule WHERE vehicule = ?;');
$get_coup->execute(array($_GET['vehicule']));
$get_coup = $get_coup->fetchAll();
$ncoup = 1;
foreach ($get_coup as &$coup)
{
  echo '<script type="text/javascript">';
  switch ($coup[5])
  {
    case 'ar':
    echo '$(".artrans").append(';
    break;
    case 'av':
    echo '$(".avtrans").append(';
    break;
    case 'g':
    echo '$(".gtrans").append(';
    break;
    case 'd':
    echo '$(".dtrans").append(';
    break;
    case 'int1':
    echo '$(".int1trans").append(';
    break;
    case 'int2':
    echo '$(".int2trans").append(';
    break;
    case 'int3':
    echo '$(".int3trans").append(';
    break;
    default:
      //Code...
    break;
  }
  switch ($coup[7])
  {
    case 'green':
      $color = '\'#00FF00\'';
      break;
 
    case 'red':
      $color = '\'#FF0000\'';
      break;
 
    default:
      # code...
      break;
  }
 
  echo '$(\'<div class="coup">'.$ncoup.'</div>\').css(
    {
      position: \'absolute\',
      top: '.$coup[2].' + \'%\',
      left: '.$coup[1].' + \'%\',
      width: \'10px\',
      height: \'10px\',
      background: '.$color.'
    }))</script>';
 
  echo '
  <script type="text/javascript">
  if ($(".outils").length)
  {
    $( ".outils.'.$coup[5].'").append("<tr><td>'.$ncoup.'</td><td>'.$coup[3].'</td><td>'.$coup[6].'</td><td><a href=\'suppr_coup.php?coup='.$coup[0].'&plaque='.$_GET['vehicule'].'\'  onclick=\'return confirm(suppr_'.$ncoup.');\'>Supprimer</a></td></tr>");
  }
  </script>';
  $ncoup++;
}

Résultat : CA FONCTIONNE A 100% (sur tablette) ! Par contre, sur pc, aucun point s'affiche si mon navigateur est en agrandi, il faut que je le réduit au niveau de sa taille pour récupérer les points, mais sinon sur la tablette c'est NI-QUEL (avec un petit temps d'attente d'affichage de 2-3 secondes le temps que la page ai bien chargé pour la récupération des points mais c'est pas grave).

Merci pour toutes les connaissances que tu m'as apporté, toutes ces astuces que tu m'as prodigué, et aussi tout ce temps que t'as passé à chercher à m'aider, je trouve ça incroyable cette entraide que t'as eu envers moi. Bravo pour tes connaissances, ta réflexion, ta patience. Je te fais l’éloge car c'est mérité.

**Watilin** · 06/04/2018, 17h53

Envoyé par ITSCOLLASPE

A la base j'avais mis "==" […]
Mais le problème est venu de mon IDE : PHPStorm qui ne supportait pas que je mette 2 "=" du coup j'ai mis un simple pour pas qu'il me fasse d'erreurs.

Alors je n’utilise pas PHPStorm mais j’ai du mal à croire qu’il conseille un truc aussi bête X(
D’habitude les linteurs (ex : JSLint.com) ont plutôt tendance à signaler quand il n’y a qu’un seul signe égal.

J'ai appliqué tout ce que tu m'as dis, voici le code JS :
(...)

Je viens de me rendre compte que $(window).trigger('resize'); ne fonctionne pas, et c’est ma faute : j’ai oublié que tu utilisais jQuery quand je t’ai présenté le concept de throttling, et j’ai utilisé un addEventListener natif pour gérer l’évènement resize.

Pour une raison que j’ignore, les évènements resize créés par jQuery ne sont pas détectés par un addEventListener natif. En revanche, le contraire fonctionne : un resize natif est détecté par jQuery.

Code :

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

window.dispatchEvent(new Event("resize"));

Pour rester cohérent avec le reste de ton code, je te conseille de remplacer le addEventListener par un écouteur jQuery :

Code :

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

1
2
3
4
5
6
7
8
9
    ...
 
    //Fonctions
    $(window).on('resize', function () {
        clearTimeout(throttleTimer);
        throttleTimer = setTimeout(handleResize, 250);
    });
 
    ...

Mais sinon, émettre un resize artificiel juste pour provoquer un appel à handleResize, c’est un peu de la bidouille

Tu peux faire plus simple : appeler directement handleResize.

Et voici mon code HTML/php (en référence au code_html) :
(...)

J’ai jeté un œil rapidement, je crois qu’il va y avoir pas mal de travail de factorisation de ce côté-là aussi

Attention également à ne pas renvoyer directement des valeurs $_GET ou $_POST au client, c’est une vulnérabilité XSS. Si la valeur est censée être un nombre, convertis-la avec intval ; sinon, utilise htmlspecialchars ou strip_tags. Ou autre, en fait ça dépend de quelle manière la chaîne est affichée. Plus bas j’ai mis un exemple avec urlencode pour une valeur qui va dans l’attribut href d’un lien.

Quant à charger_coup.php, le code JS généré est vraiment difficile à déduire. Comme je l’ai déjà dit, l’idéal serait d’envoyer uniquement des données, et d’avoir du code statique côté client qui utilise ces données pour mettre à jour l’affichage.
Mais dans un premier temps, vu qu’au final, il y a peu de parties qui changent, tu peux regrouper tout le code dans une grande chaîne avec quelques variables dedans, avec la syntaxe HEREDOC pour éviter les problèmes de guillemets. (Échapper les signes dollar n’est pas nécessaire, mais je le fais par souci de cohérence : les $ échappés pour jQuery, les $ non échappés pour les variables PHP.)

Une pensée spéciale pour cet attribut onclick

Les attributs HTML qui commencent par on, comme n’importe quels attributs, sont d’abords lus par l’analyseur HTML, et ensuite ils sont passés à l’interpréteur JS. Déjà en temps normal, si tu écrivais une page en pur HTML (avec l’extension .html), il y aurait un « niveau » de guillemets à échapper.
Là en plus c’est une chaîne HTML que tu génères depuis un script jQuery… Et ce script est lui-même généré par du code PHP ! Bonjour les nœuds au cerveau

Du coup j’ai un peu retravaillé la partie "outils" pour remplacer cet attribut par un .on("click") plus propre.

La clé pour apprendre à jongler avec .append() et .appendTo() c’est de se rappeler que c’est toujours l’élément de départ qui est renvoyé, afin de nous permettre de chaîner les appels.

Code :

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

1
2
$(x).append(y) // y est ajouté à x ; renvoie x
$(a).appendTo(b) // a est ajouté à b ; renvoie a

J’ai aussi constaté que tes switch ne faisaient que « traduire » une valeur en une autre. Dans ce genre de cas, tu peux utiliser simplement un array.

(Note : en JS on ne fait pas ça avec un array, car les arrays de JS ne sont pas associatifs. À la place, on utilise un objet littéral, c’est presque la même syntaxe, il suffit de remplacer [ ... ] par { ... } et les => par des :).

Code php :

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
<?php
require 'connexionBDD.php';
$get_coup = $db->prepare('SELECT * FROM Coup_vehicule WHERE vehicule = ?;');
// dans l’idéal il faudrait aussi protéger ce qui va dans la base,
// mais là c’est juste un SELECT et ta requête est préparée, donc ce n’est pas trop grave
$get_coup->execute([ $_GET['vehicule'] ]);
$get_coup = $get_coup->fetchAll();
 
$ncoup = 1;
 
// protection des données qui retournent côté client
// ici ça va dans une url donc on utilise urlencode
$urlencodedVehicle = urlencode($_GET['vehicule']);
 
// table de traduction pour les couleurs
$colorTable = [
  'green' => "'#00FF00'",
  'red'   => "'#FF0000'",
];
 
echo "<script type='text/javascript'>\n";
foreach ($get_coup as &$coup) {
  $color = $colorTable[ $coup[7] ];
 
  echo <<<EOT
  \$(".{$coup[5]}trans").append(
    \$('<div class="coup">$ncoup</div>').css({
      position   : 'absolute',
      top        : {$coup[2]} + '%',
      left       : {$coup[1]} + '%',
      width      : '10px',
      height     : '10px',
      background : $color
    })
  );

  if (\$(".outils").length) {
    \$('<tr></tr>').append(
      '<td>$ncoup</td>',
      '<td>{$coup[3]}</td>',
      '<td>{$coup[6]}</td>',
      \$('<td>{$coup[6]}</td>').append(
        \$('<a>Supprimer</a>')
          .attr('href', 'suppr_coup.php?coup={$coup[0]}&plaque=$urlencodedVehicle')
          .on('click', function () {
            return confirm(suppr_$ncoup);
          })
      )
    ).appendTo('.outils.{$coup[5]}');
  }\n
EOT;
 
  $ncoup++;
}
echo '</script>';

Pour vérifier que le code généré est correct, tu peux examiner le corps des requêtes ajax, toujours avec l’onglet réseau de la console.

Merci pour toutes les connaissances que tu m'as apporté

Mais de rien ! Si tu estimes que le sujet est clos, pense au bouton

Exécution d'un script sur tablette

JavaScript

Discussions similaires

Partager

Partager