Bestimmen Sie den Ladestatus des Bildes und erzielen Sie eine prozentuale Effektladung

Vorwort

Einige große externe Ressourcen führen dazu, dass die Seite langsam geladen wird. Zu diesem Zeitpunkt wird normalerweise der Ladeeffekt hinzugefügt, der auf dem Prozentsatz des Bildladefortschritts basiert

Wie wäre es mit dem Bestimmen des Status des Bildladens?

1. onload onerror

Es wird empfohlen, diese Methode zu verwenden, nachdem das Bild erfolgreich geladen wurde Auch wenn ein Cache vorhanden ist, wird das Onload-Ereignis ausgelöst, solange die Bildadresse erneut angefordert wird. Diese Methode ist gut kompatibel und wird empfohlen

2. imgObj.onreadystatechange

Einige Browser unterstützen diese Methode. Mithilfe von readState === 'complete' können Sie feststellen, ob das Bild geladen ist.

Getestet:

Chrome und Firefox lösen dieses Ereignis nicht aus

IE Edge-Version löst dieses Ereignis nicht aus

IE 10 9 löst dieses Ereignis aus ; niedrigere Versionen wurden nicht getestet

, daher wird die Verwendung nicht empfohlen

3. imgObj.complete

Das vollständige Attribut kann bestimmen, ob das Bild geladen ist. Allerdings verarbeiten verschiedene Browser die Vollständigkeit inkonsistent:

Wenn die Bildressource normal ist, wird das Bild erfolgreich geladen.

Wenn die Bildressource jedoch abnormal ist, wird das Bild erfolgreich geladen. Das Bild in Chrome und Firefox ändert sich nach einem Ladefehler von „false“ zu „true“. IE ist jedoch immer „false“

, daher wird diese Methode nicht empfohlen.

Ladefortschritt der Bildressource

Sie können beurteilen, ob eine einzelne Bildressource geladen wurde, und es ist einfach, den Ladefortschritt aller Bildressourcen auf der gesamten Seite zu berechnen.

document.addEventListener('DOMContentLoaded', function(){
      var imgs = document.querySelectorAll('img'), //所有图片资源
          show = 0, //百分比
          num = 0; //加载完成的个数
      var all = imgs.length;
      [].slice.call(imgs).forEach(function(element,index){
         //不管是否加载成功，都num+1
        element.addEventListener('load',function(){
          num++;
          show = Math.floor(100*num/all);

        })

        element.addEventListener('error',function(){
          num++;
          show = Math.floor(100*num/all);
        })
      })
    })

Durch das Hinzufügen von Masken- und Prozentwörtern ist es einfach, den Ladeprozenteffekt zu erzielen.

Nachdem die Seite vollständig geladen ist , blenden Sie die Maske aus, um einen freundlicheren Ladeeffekt zu erzielen

    window.onload = function(){
      document.querySelector('.mask').classList.add('hide');
    }

Das obige ist der detaillierte Inhalt vonBestimmen Sie den Ladestatus des Bildes und erzielen Sie eine prozentuale Effektladung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!