Query: How can I retrieve and monitor the src, width, and height of all images on a webpage and display this information in the console whenever the page's size changes?
Sample Code Snippet:
var images = document.getElementsByTagName('img');
var imageInfoList = [];
for(var i = 0; i < images.length; i++) {
imageInfoList.push(images[i].src);
imageInfoList.push(images[i].width);
imageInfoList.push(images[i].height);
}
window.onresize=function(){
for(var i = 0; i < images.length; i++) {
console.log(imageInfoList[i]);
}
//I need to update the array to reflect the new dimensions of the images on the page. Should I iterate through again as above? The source URL will remain constant.
};
I am uncertain about properly updating the array with image data and then accessing it for display in the console log.