Maison > Article > interface Web > Analyse du préchargement d'images en html (avec code)

Analyse du préchargement d'images en html (avec code)

不言original: 2018-08-02 09:34:132904parcourir

Cet article vous présente l'analyse du préchargement d'images en HTML (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Souvent, lorsque nous écrivons des pages HTML, lorsque nous devons ajouter des images à la page, nous plaçons naturellement les images directement dans le 6c04bd5ca3fcae76e30b72ad730ca86d en utilisant la balise a1f02c36ba31691bcfe87b2722de723b pas de gros problème.

Mais quand il y a beaucoup de photos, des problèmes surviennent. Lorsque la page HTML est analysée par l'analyseur, celui-ci doit constamment rechercher le chemin de l'image pour charger l'image, et ces images peuvent ne pas nécessairement être vues par l'utilisateur en déclenchant certaines opérations de type clic. De cette façon, certains préchargements d’images inutiles prolongeront le temps de chargement de la page et entraîneront une mauvaise expérience utilisateur.

Afin de résoudre ce problème de performances, une meilleure solution consiste à utiliser js pour retarder le préchargement des images. Alors, quel est le processus de mise en œuvre spécifique ?

Je vais d'abord mettre le code que j'ai implémenté ci-dessous :

<html lang="en"><head>
         <meta charset="UTF-8">
         <title>Document</title><style>
  body{position:relative;text-decoration: none;list-style: none;}

  .showpic{position:absolute;height:550px;width:90%;margin-left:80px;background-color: black;}

  .button-box{position: absolute;margin-top:560px;margin-left: 600px;z-index: 5;}

  .preload{position: fixed;height: 100%;width:100%;top:0;background-color: white;display: none;}

  img{position: absolute;margin-left: 30px;margin-top: 3px;}

  button{height: 30px;width:80px;font-size: 10px;}</style><script  src="https://code.jquery.com/jquery-1.12.4.js"></script></head><body>
         <p class="showpic">
                  <img src="img/pexels-photo-297814.jpeg" id="img">
         </p>

         <p class="button-box">
                   <button type="button" value="前一张"  data-control="prev" class="button">前一张</button>
                   <button type="button" value="后一张"  data-control="next" class="button">后一张</button>
         </p>
         <p class="preload"></p><script type="text/javascript" src="js/preload.js"></script></body></html>$(document).ready(function(){

         var imgs = ["img/pexels-photo-297814.jpeg",
                                     "img/pexels-photo-465445.jpeg",
                                     "img/pexels-photo-619948.jpeg",
                                     "img/pexels-photo-620336.jpeg",
                                     "img/pexels-photo-885746.jpeg",
                                     "img/pexels-photo-886109.jpeg",
                                     "img/pexels-photo-888994.jpeg"];

         var  index = 0,
         len =imgs.length;

        $(".button").on("click",function(){

                 if($(this).data(&#39;control&#39;)=== "prev"){
                           index = Math.max(0,--index);
                 }else{
                           index = Math.min(len-1,++index);
                 }

                 $("#img").attr("src",imgs[index]);

        });

});

Je souhaite implémenter ce cas. Le processus d'affichage de l'image est réalisé en cliquant sur le bouton. Évidemment, je n'ai mis qu'une seule image dans la balise a1f02c36ba31691bcfe87b2722de723b de la boîte 6ffcb40369b851f71b47260865168208 (pour éviter que la page ne s'ouvre sans rien), et je n'ai pas mis toutes les images pouvant être affichées dans la boîte. Parce que cela augmentera inévitablement la pression sur le navigateur Web pour analyser la page HTML.

J'ai mis tous les chemins de recherche de ces images dans le code js, et j'ai mis à jour la balise a1f02c36ba31691bcfe87b2722de723b en modifiant l'attribut src. J'ai également utilisé l'attribut data du html pour personnaliser le type de bouton de clic. et déterminez le changement du chemin de l'image en obtenant cette valeur de données en js.

Une telle implémentation est plus propice à réduire la pression sur l'analyseur du navigateur pendant le processus d'analyse des pages HTML.

Articles Liés

Voir plus