Wie kann das Laden von Bildern verzögert werden?-HTML-Tutorial-php.cn

Wie kann das Laden von Bildern verzögert werden?

PHP中文网

Freigeben： 2017-06-22 10:51:31

Original

2587 Leute haben es durchsucht

Sind Sie immer noch besorgt über die Ladegeschwindigkeit von Webseiten? Haben Sie jemals festgestellt, dass Webseiten in einigen Browsern sehr schnell, in anderen jedoch sehr langsam sind? Heute möchte ich Ihnen vorstellen, warum diese Situationen auftreten, und Ihnen die spezifischen Implementierungsmethoden mitteilen

1. Erklären Sie Ihnen zunächst, warum Bilder verzögert geladen werden müssen

Jeder kennt das Gängige Bildformate Nun, ein Bild ist eine Gruppe von Pixeln, die nach und nach zusammengesetzt werden. Je mehr Pixel ein Bild hat, desto größer wird es. Im Allgemeinen sind Bilder mehrere KB, mehrere Dutzend KB oder mehrere Megabyte groß. Stellen Sie sich vor, wenn Ihr Bild 10 KB groß ist, spielt es keine Rolle, ob es verzögert ist oder nicht, aber wenn es mehrere Dutzend KB oder Hunderte von KB groß ist, wie viele Sekunden wird der Benutzer dann noch warten müssen? Sie können Benutzer nicht zig Sekunden warten lassen, bis sie den Inhalt nur wegen eines Bildes sehen, oder?

2. Implementierung des verzögerten Ladens von Bildern

Tatsächlich ist die Funktion des verzögerten Ladens von Bildern keine Seltenheit mehr, und einige Browser haben das verzögerte Laden von Bildern implementiert, dies ist jedoch nicht der Fall unterstützt. Was ist mit dem Browser?

Dann werde ich es selbst herausfinden, okay! Nicht viel Unsinn, fügen Sie zuerst den Code ein:

//    window.imageList=[
//        { id:"图像1ID", url:"URL", onload=加载函数 },
 //        { id:"图像2ID", url:"URL", onload=加载函数 },
 //        { id:"图像3ID", url:"URL", onload=加载函数 },
 //        ....
 //    ];
 //在页面加载完成后调用 onLoadImage();
 function onLoadImage()
 {
     var i=0;
     if(window.imageList){
         //if(typeof window.imageList != "array")
         //    return;
         for(i=0;i<window.imageList.length;i++){
             var now=window.imageList[i];
             var id,url,onloadfn;
             if(now.id){
                 id=now.id;
             }
             if(now.url){
                 url=now.url;
             }
             if(now.onload){
                 onloadfn=now.onload;
             }
             if(id == null || url == null){
                 continue;
             }
             var nelement = document.getElementById(id);
             nelement.src = url;
             if(onloadfn)
                 (onloadfn)(nelement,url);
             id = url = onloadfn = null;
         }
     }
     console.log("All Image is loaded!Total "+i+" Image!");
     if(window.onImageAllLoad)
         (window.onImageAllLoad)();
 }

Nach dem Login kopieren

Beispiel:

<!DOCTYPE html>
<html>
   <head>
    <meta charset="utf-8" />
    <title>这是一个测试</title>
    </head>
   <body>
       <img id="img1" alt="正在加载"></img>
       <img id="img2" alt="正在加载"></img>
        <img id="img3" alt="正在加载"></img>
   <script src="SuperImageLoader.js"></script>
   <script>
        window.imageList=[
         {
              id:"img1",
                url:"https://www.baidu.com/img/baidu_jgylogo3.gif",
                onload:function(){
                     alert(&#39;第一张图片已加载完成！&#39;);
                 }
            },
            { id:"img2", url:"https://www.baidu.com/img/baidu_jgylogo3.gif"},
            { id:"img3", url:"https://www.baidu.com/img/baidu_jgylogo3.gif"}
        ];
        window.onImageAllLoad=function(){
             alert(&#39;所有图片已加载！&#39;);
         }
        onLoadImage();
    </script>
</body>
</html>

Nach dem Login kopieren

Das Folgende ist ein Test-Screenshot:

Das obige ist der detaillierte Inhalt vonWie kann das Laden von Bildern verzögert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!