Question

I am trying to write an JavaScript to extract the pictures in the html whose width and height are higher than a specified value. I use the DOM to extract the pictures. Here’s the problem:

The pages that I want to extract has actually a JavaScript called “checkimagesize”. Each will call an onload function like:

<img src="./01_files/mobile01-cdbd8.jpg" id="http://attach.mobile01.com/attach/201112/mobile01-cdbd8.jpg" onload="checkimagesize(this.id,this.width,this.height)" />

After each calls the “checkimagesize”, I use DOM to extract the pictures. The width and height are all zero. (The pictures are reized by the onload function)

Does anyone know how to get the actual width and height of these pictures after it called the resize function?

Thank you very much.

function checkimagesize(image, wi, hi)
{
    var wo = wi + 40;
    var ho = hi + 40;
    var resize = false;
    var imax = 640;
    if (wi > imax) {
        rating = wi / imax;
        wi = Math.ceil(wi / rating);
        hi = Math.ceil(hi / rating);
        resize = true;
    }

    if (resize) {
        reimg = document.getElementById(image);
        reimg.width = wi;
        reimg.height = hi;
        reimg.onclick = function () {window.open(image, '', 'resizable=yes,status=yes,scrollbars=yes,width='+wo+',height='+ho);};
        reimg.style.cursor = 'pointer';
    }
}

my code:

listPics = document.images;
listPics[i].width 
listPics[i].height

Answer 1

You are probably trying to access the image properties before they have finished loading. Try executing your code after the window’s load event (when all page elements have finished loading):

window.onload = function () {
    for (var i = 0; i < document.images.length; i++) {
        var img = document.images[i];  
        console.log("image size: " + img.width + "×" + img.height);
    }
};