Get Image Info und in der Konsole auf der Seite anzeigen Größe

Question

Frage: Wie würde ich die src, Breite und Höhe aller Bilder auf einer Seite sammeln und dann jedes Mal, dass aktuelle Seite Größe ändert, zeigen Sie die Bildinformationen in der Konsole .

Beispielcode:

var images = document.getElementsByTagName('img'); 
var srcList = []; 
for(var i = 0; i < images.length; i++) { 
    srcList.push(images[i].src); 
srcList.push(images[i].width); 
srcList.push(images[i].height); 
} 

window.onresize=function(){ 
for(var i = 0; i < images.length; i++) { 
console.log(srcList[i]); 
} 
//I am pretty sure I would have to go get the new width and height of the images on the page. Should I just loop through and populate the array like above? The source would stay the same. 
    }; 

Ich bin nicht sicher, wie das Array korrekt mit dem Bildinformationen zu aktualisieren und sobald ich sie alle Zugang haben sie es in der Konsolenprotokoll zu zeigen.

Answer 1

document.getElementsByTagName gibt eine liveHTMLCollection von Elementen zurück, die dem Tagname entsprechen. Live bedeutet, dass jede Änderung im Dokument in der Sammlung widergespiegelt wird. Daher müssen Sie die Sammlung nur einmal erstellen und erhalten bei jeder Abfrage Live-Daten.

So können Sie etwas tun:

var images = document.getElementsByTagName('img'); 
window.addEventListener('resize', function() { 
    for(i=0; i<images.length; i++) { 
    console.log(images[i].src, images[i].width, images[i].height); 
    } 
}); 

Und es wird die aktuellen Daten der Bilder immer zeigen.