JavaScript Image().width returns 0

Question

I need to get width and height of images with display:none and I'm getting both width and height 0. here's my code:

for (i = 0; i <= slideCount; ++i) {
            imgPath = slideshow.eq(i).attr("src");
            imgEle = new Image();
            imgEle.src = imgPath;

            imgEle.addEventListener("load", function () {
                imgSize = [imgEle.width, imgEle.height];
                if ((imgSize[0]/imgSize[1]) > (boxSize[0]/boxSize[1])) {
                    slideshow.eq(i).css("height", "100%");
                }
                else {
                    slideshow.eq(i).css("width", "100%");
                }
            });
        }

I tried onload = funcion() {} approach as well as not checking if image is loaded, yet still I'm getting width and height as 0. What's more when i launched console on Chrome and referred to those fields I got proper values.

You have to add it into DOM before the dimensions are available. — Derek 朕會功夫, Feb 09 '14 at 09:43
`display: none` removes the element from the DOM flow so it doesn't have dimensions. You have to add it to an element that isn't display none (usually visibility: hidden) and then read the dimensions. It's not straightforward to solve. — Andy Ray, Feb 09 '14 at 09:44

Arun P Johny · Accepted Answer · 2014-02-09T09:57:32.217

It is because of the wrong use of closure variable in a loop, when the load handler is executed the variable imgEle refers to the last image object reference, not the one on which the load event was called, so when the first element is loaded the last element might not have been loaded so imgEle.width/imgEle.height will return 0

Instead you can use this which will refer to the element on which the load event was called inside the load event handler

From what I can see, what you need is

slideshow.each(function () {
    var $this = $(this);
    var imgPath = $this.attr("src");
    var imgEle = new Image();
    imgEle.src = imgPath;

    imgEle.addEventListener("load", function () {
        var imgSize = [this.width, this.height];
        if ((imgSize[0] / imgSize[1]) > (boxSize[0] / boxSize[1])) {
            $this.css("height", "100%");
        } else {
            $this.css("width", "100%");
        }
    });
})

Note: the array index runs from 0...length-1 so your loop condition <= slideCount; might have to be relooked at

Your variables are still global and will overwrite the previous `imgPath`and `imgEle` each iteration. — Eric Herlitz, Feb 09 '14 at 09:48
@EricHerlitz that doen't matter since the OP is not used it anywhere — Arun P Johny, Feb 09 '14 at 09:49
@ArunPJohny Notice also the `i` variable in the eventhandler function. Not my downvote though. — Teemu, Feb 09 '14 at 09:52

Derek 朕會功夫 · Answer 2 · 2014-02-09T21:03:45.750

1

imgEle is overwritten each time your loop runs. Wrap an anonymous function around it to prevent this issue.

for(var i = 0; i <= slideCount; ++i) {
    (function(i){
        var imgPath = slideshow.eq(i).attr("src");
        var imgEle = new Image();
        imgEle.src = imgPath;

        imgEle.addEventListener("load", function () {
            imgSize = [imgEle.width, imgEle.height];
            if ((imgSize[0]/imgSize[1]) > (boxSize[0]/boxSize[1])) {
                slideshow.eq(i).css("height", "100%");
            }
            else {
                slideshow.eq(i).css("width", "100%");
            }
        });
    })(i);
}

edited Feb 09 '14 at 21:03

answered Feb 09 '14 at 09:48

Derek 朕會功夫

92,235
44
185
247

1

Repeating each others answers are we now, nice. – Eric Herlitz Feb 09 '14 at 09:54
1

@EricHerlitz I can't see any repeated answer here. Derek's code passes also a correct value to `i` to the eventhandler, which other answers don't, until now Arun P Johnny has edited his answer. – Teemu Feb 09 '14 at 09:59
@Teemu value of `i` is still not fixed... also the loop condition `i <= slideCount` is suspecious – Arun P Johny Feb 09 '14 at 10:02
2

@EricHerlitz - Repeating each other answers? Repeating who I may ask? Well at least I know that I am not copying yours because yours isn't even correct. – Derek 朕會功夫 Feb 09 '14 at 21:05
1

@Derek朕會功夫 Well you did. Sorry but thats very lame of you – Eric Herlitz Feb 09 '14 at 21:11
2

@EricHerlitz - You didn't tell me I copied whom. – Derek 朕會功夫 Feb 09 '14 at 21:13

JavaScript Image().width returns 0

2 Answers2