1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2018
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : mars 2018
    Messages : 7
    Points : 7
    Points
    7

    Par défaut Exécution d'un script sur tablette

    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);
    });

  2. #2
    Modérateur
    Avatar de Marco46
    Homme Profil pro
    Développeur informatique
    Inscrit en
    août 2005
    Messages
    3 239
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : août 2005
    Messages : 3 239
    Points : 11 897
    Points
    11 897

    Par défaut

    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.
    "Toute personne croyant qu'une croissance exponentielle peut durer indéfiniment dans un monde fini est soit un fou, soit un économiste."
    Kenneth E. Boulding

    "/home/earth is 102% full ... please delete anyone you can."
    Inconnu

    Trust me, i'm an engineer !
    https://www.youtube.com/watch?v=rp8hvyjZWHs

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2018
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : mars 2018
    Messages : 7
    Points : 7
    Points
    7

    Par défaut

    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.

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 932
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 932
    Points : 21 647
    Points
    21 647
    Billets dans le blog
    57

    Par défaut



    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.

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2018
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : mars 2018
    Messages : 7
    Points : 7
    Points
    7

    Par défaut

    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.

  6. #6
    Expert confirmé Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 426
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 426
    Points : 4 872
    Points
    4 872

    Par défaut

    Citation Envoyé par ITSCOLLASPE Voir le message
    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/.
    La FAQ JavaScript – Les cours JavaScript
    Un article du MDN n’a pas de version française ? Je peux peut-être le traduire, envoyez-moi un MP

    La touche F12 : l’outil indispensable à tout développeur JavaScript !

  7. #7
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2018
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : mars 2018
    Messages : 7
    Points : 7
    Points
    7

    Par défaut

    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 !

  8. #8
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2018
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : mars 2018
    Messages : 7
    Points : 7
    Points
    7

    Par défaut

    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.

  9. #9
    Expert confirmé Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 426
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 426
    Points : 4 872
    Points
    4 872

    Par défaut

    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.
    La FAQ JavaScript – Les cours JavaScript
    Un article du MDN n’a pas de version française ? Je peux peut-être le traduire, envoyez-moi un MP

    La touche F12 : l’outil indispensable à tout développeur JavaScript !

  10. #10
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2018
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : mars 2018
    Messages : 7
    Points : 7
    Points
    7

    Par défaut

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

  11. #11
    Expert confirmé Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 426
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 426
    Points : 4 872
    Points
    4 872

    Par défaut

    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é.
    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
    La FAQ JavaScript – Les cours JavaScript
    Un article du MDN n’a pas de version française ? Je peux peut-être le traduire, envoyez-moi un MP

    La touche F12 : l’outil indispensable à tout développeur JavaScript !

  12. #12
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2018
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : mars 2018
    Messages : 7
    Points : 7
    Points
    7

    Par défaut

    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é.

  13. #13
    Expert confirmé Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 426
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 426
    Points : 4 872
    Points
    4 872

    Par défaut

    Citation Envoyé par ITSCOLLASPE Voir le message
    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
    La FAQ JavaScript – Les cours JavaScript
    Un article du MDN n’a pas de version française ? Je peux peut-être le traduire, envoyez-moi un MP

    La touche F12 : l’outil indispensable à tout développeur JavaScript !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [PowerShell] Exécution d'un script sur un client
    Par yanover dans le forum Scripts/Batch
    Réponses: 4
    Dernier message: 14/12/2015, 18h34
  2. [PHP 5.4] Exécution périodique de script sur IIS
    Par aspkiddy dans le forum Débuter
    Réponses: 2
    Dernier message: 06/06/2014, 21h55
  3. [XL-2007] Suspendre une macro le temps d'exécution d'un script sur SAP
    Par yaciin dans le forum Excel
    Réponses: 2
    Dernier message: 10/03/2014, 10h09
  4. lancement de script sur tablette en tactile
    Par rnonety dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 27/02/2012, 15h33
  5. Réponses: 4
    Dernier message: 20/02/2008, 18h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo