Image width traces zero with onload when cached

Question

I'm building a Javascript lightbox and I'm trying to adjust the size once the image has loaded. I'm using the code below, which works fine - it outputs the correct width once loaded.

My problem:

When I refresh, it will load the image instantly from the cache, and it seems to bypass the load. I get an instant zero for the width. Why does this happen?

My code:

var oImage = new Image();

oImage.src = 'http://mydomain.com/image.png';

container.html(oImage);

oImage.onload = function(){

    alert(this.width);
}

** Update **

@Alex: This is the code I've tried with your plugin, I assume I'm probably doing something wrong. I'd be eager to get this working because your plugin looks quite good.

container.waitForImages(function() {

    var cWidth = $(this).width();

    alert("width: "+cWidth); // returns 0 - works first time but not cached

});

// Adding the image to the container for preload

container.html('<img src="mygraphic.png" />');

You can examine the code of [my plugin](https://github.com/alexanderdickson/waitForImages) to see how I handle this. — alex, Jan 27 '12 at 05:15
@alex, Thanks for sharing your plugin! It would be great if you could also summarize the solution as an answer here. If not, hopefully somebody else will soon, because this is a huge problem for me too. — dkamins, Jan 27 '12 at 05:18
Have you tried setting the onload handler before you insert it in the HTML? — Ruan Mendes, Jan 27 '12 at 05:18
possible duplicate of [Getting width and height of image after jquery load()](http://stackoverflow.com/questions/4877762/getting-width-and-height-of-image-after-jquery-load) — D'Arcy Rittich, Jan 27 '12 at 05:21

score 7 · Answer 1 · answered Jan 27 '12 at 05:33

7

You need to do a few things...

Check the complete property of the img element.
Attach the load event before setting the src property.

Also, I found creating a new Image and assigning the src there is the best way to determine if the image has loaded or not.

answered Jan 27 '12 at 05:33

alex

479,566
201
878
984

I checked out your JS plugin and it seems to work, but after the image loads into the container - I try and trace the width of the container and it still returns zero, even though the container has stretched to accommodate the new size. – JCraine Jan 27 '12 at 09:21
Hi Alex, I've updated my initial post with the code using your plugin. Check it out if you have time, cheers. – JCraine Jan 27 '12 at 09:44
@JCraine If you can setup a http://jsfiddle.net of the problem, I'll be happy to help. – alex Jan 27 '12 at 10:22
Please, If loading of the image has not completed yet and we have to check `complete ` property, Why is load event fired then? I see the function inside `load` event is executed but width and height of the image are `0`. So if the check for `complete` property inside `load` callback is false, the codes will not execute at all. I appreciate if you help me – Code-Lover Aug 10 '20 at 17:55

Richard Neil Ilagan · Answer 2 · 2012-01-27T07:52:31.483

You may want to switch the .html() and the .onload() calls.

If the image is loading from cache, I'm imagining that the .html() call completes before the script has had a chance to attach a function handler to the image's onload event. Therefore, effectively bypassing the load event itself (as the image has already loaded).

If it's still downloading the image (i.e. not cached), there will be more than enough time to call the .onload attach before the image completely finishes rendering.

While you're at it, you may want to do this the jQuery way, just so you're attaching events more similarly to DOM2 than DOM0.

var image = $('<img/>', { 
    src : 'http://mydomain.com/image.png'
}).load(function () {
    alert(this.width);
})
// maybe clear container before if you want
.appendTo(container);

If we're going to have to set the src after the onload, we might as well do this instead:

var image = $('<img/>')
    .load(function () {
        alert(this.width);
    })
    .attr('src','http://mydomain.com/image.png')
    .appendTo(container)
    ;

Hopefully that works cleanly.

Thanks for the advice. I've been trying with your example but as soon as I actually append the element to the page, the width is untraceable. Knocking off the append gives me the numbers, but I'm just unable to add it to the page :/ — JCraine, Jan 27 '12 at 06:47
I found that I could get it working by placing the append command inside the actual load. Could this pose problems later? Also is it possible to track the load on something other than an 'image' eg an — JCraine, Jan 27 '12 at 07:14

score 1 · Answer 3 · edited May 23 '17 at 10:26

1

This answer JavaScript: Know when an image is fully loaded suggests that you should set onload before setting src

edited May 23 '17 at 10:26

Community

1
1

answered Jan 27 '12 at 05:22

Ruan Mendes

90,375
31
153
217

Image width traces zero with onload when cached

3 Answers3