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 ! :-)

Exécution d'un script sur tablette

JavaScript

Vue hybride

Discussions similaires

Partager

Partager