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