$.progress callback doesn't always fire in Firefox. Cache issue? #54

Closed
KingScooty opened this Issue Jan 28, 2013 · 10 comments

Projects

None yet

3 participants

@KingScooty

Webkit browsers seem to be handling the images loading fine, but i've noticed that unless i do a hard refresh, the $.progress callback doesn't fire for all the images, only a few.

So if i have a fade transition that reveals the images inside $.progress, a lot of the images are still hidden, even though they've loaded.

Is the only way to get round this at the moment to double check if some of the images are hidden, and if so, fade them in using the $.done callback?

@darsain
Collaborator
darsain commented Jan 29, 2013

Can you at least post how are you calling imagesLoaded and binding progress callback?

Or ideally, which is what every issue report should have by default: replicate the issue on jsfiddle, jsbin, or a similar service.

@KingScooty

http://jsbin.com/esijak/1/edit

Run the example in firefox, and then run it for a second time to see what i'm talking about.

@darsain
Collaborator
darsain commented Jan 29, 2013

I'll quote the documentation in repository index:


Important!: progress method should be always registered with callback:object argument, which ensures that it will be registered before the determination process starts. Otherwise you might run into an issue where by the time you register the progress method all images have been loaded, and there is nothing to report anymore.


Therefore, when you are using progress method, you should always register it in a callbackMap, like so:

var dfd = $('.item__image').imagesLoaded({
progress: function (isBroken, $images, $proper, $broken) {}
});

@darsain darsain closed this Jan 29, 2013
@KingScooty

Actually, that didn't solve the issue. Tried in Firefox 14.0.1 and Firefox 18.0.1.

http://jsbin.com/esijak/2/edit

@darsain
Collaborator
darsain commented Jan 29, 2013
@KingScooty

I tried that, too :/
That example loads all the images, but doesn't always fade them in; they just load normally (top to bottom baseline loading) after the first attempt.

@darsain
Collaborator
darsain commented Jan 31, 2013

I see what you are referencing. Reopening the issue, but can't say when I'll look into it. I'm honestly too irritated by all the damn browser quirks regarding this :) It's like it never ends.

@darsain darsain reopened this Jan 31, 2013
@KingScooty

Ha, i bet! I've got round it by having a catch in the .done() callback that double checks to see whether all the images have successfully revealed themselves.

Modifying the $(img)[0].src is also another way of overcoming it by forcing a cache ignore before triggering imagesloaded, but this method isn't particularly bandwidth efficient - $(img)[0].src = $(img)[0].src + '?1234';

@darsain
Collaborator
darsain commented May 16, 2013

I've finished my next iteration on ImagesLoaded. It is a draft, but it uses a new determination process, so I'd like people to test it out before I continue with this. It should solve the issues above.

You can grab the code here: imagesloaded.js
And read the documentation here: Darsain/imagesloaded

The API is completely changed, so reading the docs is recommended.

Haven't written tests yet so there might be bugs.

@desandro
Owner

imagesLoaded v3 has integrated Darsain's revised determination process. Tests have been repeatedly passing in Firefox. I recommend you upgrade imagesLoaded to v3 and report back if you continue to experience issues.

@desandro desandro closed this Oct 27, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment