Analyse des Bildvorladens in HTML (mit Code)-HTML-Tutorial-php.cn

Analyse des Bildvorladens in HTML (mit Code)

不言

Freigeben： 2018-08-02 09:34:13

Original

2973 Leute haben es durchsucht

Dieser Artikel stellt Ihnen die Analyse des Bildvorladens in HTML vor (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Wenn wir HTML-Seiten schreiben und Bilder zur Seite hinzufügen müssen, fügen wir die Bilder natürlich direkt in den -Tag ein kein großes Problem.

Aber wenn es viele Bilder gibt, entstehen Probleme. Wenn die HTML-Seite vom Parser analysiert wird, muss er ständig nach dem Pfad des Bildes suchen, um das Bild zu laden, und diese Bilder können vom Benutzer möglicherweise nicht unbedingt gesehen werden, indem er einige klickähnliche Vorgänge auslöst. Auf diese Weise verlängert das unnötige Vorladen von Bildern die Ladezeit der Seite und führt zu einer schlechten Benutzererfahrung.

Um dieses Leistungsproblem zu lösen, besteht eine bessere Lösung darin, js zu verwenden, um das Vorladen von Bildern zu verzögern. Was ist also der konkrete Implementierungsprozess?

Ich werde zuerst den Code, den ich implementiert habe, unten einfügen:

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

        });

});

Nach dem Login kopieren

In diesem Fall möchte ich Klickschaltflächen implementieren Erkennen Sie den Anzeigeprozess von Bildern. Offensichtlich habe ich nur ein Bild in das -Tag des Felds

eingefügt (um zu verhindern, dass die Seite ohne Inhalt geöffnet wird) und nicht alle Bilder eingefügt, die angezeigt werden können die Kiste rein. Denn dadurch erhöht sich zwangsläufig der Druck auf den Webbrowser, die HTML-Seite zu analysieren.

Ich habe alle Suchpfade dieser Bilder in den js-Code eingefügt und das -Tag aktualisiert. Außerdem habe ich das Datenattribut von HTML verwendet, um den Klicktyp anzupassen. und bestimmen Sie die Änderung des Bildpfads, indem Sie diesen Datenwert in js erhalten.

Eine solche Implementierung trägt eher dazu bei, den Druck auf den Browser-Parser während des Parsing-Prozesses von HTML-Seiten zu verringern.

Empfohlene verwandte Artikel:

So beschreiben Sie kurz die Grundstruktur von HTML (mit Code)

HTML-Metadatenanalyse von Meta-Tag-Attributen (mit Code)

Das obige ist der detaillierte Inhalt vonAnalyse des Bildvorladens in HTML (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!