Analyse du préchargement d'images en html (avec code)-tutoriel HTML-php.cn

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

不言

Libérer： 2018-08-02 09:34:13

original

2902 Les gens l'ont consulté

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 en utilisant la balise 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]);

        });

});

Copier après la connexion

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 de la boîte

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