Loaded Images Have Zero Height and Width

[lynndylanhurley]

I'm trying to use this script to determine when images have finished loading so that I can draw the images to an html5 canvas.

In the 'always' callback, the image usually (not always) has a width and height of zero, which makes it impossible to set the canvas to the proper size or to draw the image with the correct parameters.

Here is the code (coffeescript):

https://gist.github.com/564ccd4410e1fccc8cb9

[desandro]

Hi! Thanks for the issue report. If you have a live URL, I'd be happy to take a look. Otherwise, there's no way for me to debug this issue.

[epicserve]

@desandro, the demo isn't working with Chrome on iOS 7. At least one image doesn't load every time I refresh the page. I'm also having this same issue with a website that's using imagesloaded in order to get the width and height, it doesn't work with Chome on iOS 7.

[desandro]

@epicserve Ah! Thanks for specifying that. I'll take another look once my new iPhone shows up in a couple weeks.

[epicserve]

@desandro Let me know if you need me to mock up another demo or something. My website is using v3.0.4.

[epicserve]

@desandro Did you get your iPhone?

[desandro]

@epicserve Just got it yesterday. Tested the demo page and it works every time. If you have a reduced test case I can take a look.

[epicserve]

@desandro I'll try to get a test going monday.

[epicserve]

@desandro I finally got around to extracting the widget, that's using imagesLoaded into it's own project. You can view the example here, http://epicserve.github.io/jquery-photo-enlarger/. I also add an issue in the project as well, https://github.com/epicserve/jquery-photo-enlarger/issues/1. Any ideas?

[nessup]

I also have this issue, but it's not reproducible every time. There seems to be some sort of race condition that causes the imagesLoaded callback to be called early.

[Nivani]

Hmm, I seem to have this problem as well. It's not consistently reproducible, so it's hard to know if a solution actually fixes the problem. It seems like once it happens it happens more often after that. I'll let you know if I find something useful.

[Nivani]

I have debugged it and I can reproduce it consistently. The problem is at imagesloaded.js line 240: var resource = cache[ this.img.src ] || new Resource( this.img.src ); If a resource is found in the imagesloaded cache but the browser still loads the image asynchronously (for example: it decides to redownload it anyway, or it has to load the image from disk), imagesloaded will say these images are loaded, but they actually aren't yet. Removing the cache fixes the problem for me: var resource = new Resource( this.img.src );

[Nivani]

There is a no-cache branch. Using this branch fixed the problem for me.

[jackhand]

Unfortunately the no-cache branch solution didn't work for me. In my particular case, the 1st time the image loads, the width/height of the image is reported as zero (0) after the always event handler occurs. If I reload the page, the image loads just fine.

[dage]

I've found that in my case the problem can be avoided by reusing Image instances that have the same uri. When trying to track a fresh Image instance that uses a src uri that have been previously tracked, the problem happens pretty consistently on the 2nd image load when running IE 10 in debug mode from the Visual Studio debugger.

[desandro]

imagesLoaded v3.2.0 has removed the internal cache. Try it out and report back if you feel this issue has been resolved.

[madagon]

sorry for bringing this up but the problem still exists with the latest version. random behavier, tested on apache cordova.