Firefox 18 OSX and Win7 loaded-event triggered before image is loaded.

[cjohansson52]

I'm not sure if I'm doing something wrong or if something is going on in Firefox on this page: http://fl.chrisjohansson.com/gallery/lega-figure/ (and it's siblings).

The summary is: I hide an image, show a loader, switch out the img src, run imagesLoaded and show the image again. This works splendidly in all tested browsers.

However, it seems firefox is triggering events before the image is loaded. So while it's doing all that it should it's not actually waiting for the image to load. It reminds me of some issue I think I read somewhere about it thinking an image is cached when it isn't. I'm just not good enough at debugging to be able to pinpoint that.

It works in all other tested browsers.

Thanks!

[darsain]

Replicate the problem on jsfiddle, jsbin, or a similar service, so I won't have to reverse-engineer your website :)

[cjohansson52]

Good idea: http://jsfiddle.net/7MeV6/3/

That's pretty much all of it. Same behavior is going on. It works in Chrome etc, but it's not waiting until load in firefox.

Thanks again!

[ghost]

It there any hope for this to be fixed? I've come across the same issue. This (unfortunately) makes the plugin useless :(

[darsain]

I think that Firefox is triggering the load event when data about element size and dimensions became available, which is however way before the image has actually finished with loading, but I haven't confirmed it yet.

There are several issues with imagesLoaded atm, and I have some ideas what to do about them, but I just don't have the time right now :/ I'll look at it as soon as it will be possible.

[darsain]

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.

[ghost]

And did you update the jquery plugin?

[desandro]

No update to this repo just yet. After @darsain's fork, I'm considering doing a full rewrite of this repo hero, taking advantage of his implementation. Staaaaaaaaaay tuned 📺

[darsain]

@desandro I was about to ask you what to do about this situation (2 repos with the same thing). I was planning to create an optional jQuery extension that would leverage my dependency-less version, on the same note as my Motio library. But that would still leave 2 repos :) So should I delete my repo and move the code into this one? Or... ?

[desandro]

For now, let's see if I do anything. Because I'm lazy I probably won't. In any case I opened up #65 to give you an idea of what I have in mind.

[desandro]

v3 has implemented Darsain's revised determination process. I recommend you upgrade imagesLoaded to v3 and report back if you continue to experience issues.

[hlambert]

Thanks.

Just came across the issue and upgraded to v3. However, I still experience the issues in FF21 on OSX.

[desandro]

@hanslambert Thanks for the report! Do you have a live URL I could take at?

[hlambert]

@desandro Talked to my project manager, and for now I am not allowed to share the project. Sorry. The issue is not that bad, so we will ship this version with the bug. I will share it with you when the site is live (approx two weeks from now). Also, I do not have time to build another test-case as the deadline is coming up.

Sorry.

I will get back to you.

[hlambert]

We have now pushed to site live, and you are welcome to have a look at it:

www.cisco.com/go/projectworkplace

We see errors in firefox both on OSX and Windows.

[joshuaballoch]

I also have issues in FF21 on OSX, similar to @hanslambert has shown. Thanks for the great plugin though!

[desandro]

Okay, I've taken a look at the Cisco site and I'm having trouble reproducing the error. If you're still having trouble on Firefox, It would help me greatly if you could provide a reduced test case.

[joshuaballoch]

@desandro i wrote this jsFiddle using isotope and imagesLoaded to show what is going wrong: http://jsfiddle.net/pS6JU/

In chrome:

1. load the fiddle
2. click "rotate"
3. new image loads and then
4. isotope's 'reLayout' fires after, and the tiles move around appropriately

In FF21:

1. load the fiddle
2. click 'rotate'
3. new image is still loading when the 'reLayout' fires, so the tiles do not move around appropriately

Start in both Chrome and FF:

Result in Chrome:

Result in Firefox:

Please let me know if I can provide any more information

[joshuaballoch]

@desandro by the way, I hope it's OK i used isotope for this example - it seemed like a good way to visually establish the order of firing of the imagesLoaded event..

[desandro]

Thanks for putting this example together. It appears imagesLoaded does not trigger only on the first page load. After refreshing the page it works. I'll investigate further.

[SebAshton]

Hi,

Was wondering what the status of this issue was?

Thanks,

[desandro]

Taking another look, it appears that this issue is related to how Firefox handle responses on 301 redirects. Here's my console output for http://jsfiddle.net/pS6JU/4/

1. Click happens.
2. New image is switched in.
3. 301 redirect
4. load event triggers -> imagesLoaded triggered
5. redirected image is loaded

I am hoping that is the root cause. If so, we can chalk up that bug to redirects in Firefox.

@SebAshton Are you experiencing any issues in Firefox or Windows?

[SebAshton]

@desandro I am experiencing the issue on Mac OS 10.8.4 and Latest Firefox. On refresh imagesLoaded works fine, I assume because its coming from the cache. This the issue also in present in the jsfiddle @joshuaballoch created.

[CGermer]

+1 to this issue.
imagesLoaded is really a lifesaver, but doesn't work as intended on Firefox.
I'm on MacOS 10.7.5 (I will post my findings for Windows8 tomorrow).
I've configured the pipe down to 48kbit/s to have a real slow experience.
Firefox 22.0 has the issue.
Chrome 28.0.1500.95 works as intended.
Safari 6.0.5 (7536.30.1) works as intended.
iOS / Chrome (actual versions) works as intended.
iOS / Safari (actual versions) works as intended.

[lesjames]

I found that when checking the height of images on line 215 Firefox is returning a height of 1. I changed this conditional to check for a height of greater than 1 and it seems to do the trick.

[SebAshton]

@lesjames does that solution work cross browser?

[lesjames]

@SebAshton I'll say this, I haven't seen it not work. The site I'm using it on is http://www.capstrat.com. I've tested in IE down to 8, FF, Safari, Chrome, Opera and iOS. On that site, you shouldn't see any of the images loading. There is a loading screen that fades out once all of the images report as done.

[desandro]

@lesjames Nice find. I'm considering adding it to master.

[hlambert]

I have now been testing it as well. To me it seems like it works as well.

Will it be added to master?

[danxshap]

I have a simple, reproducible scenario for this that is only ~4 lines of code. See here: http://plnkr.co/edit/nkKNKz3Unesc6GwOUsXf?p=preview

Firefox 25.0.1 on OS X 10.9 (all latest)

The first time you load the page, you'll see the loading image while the image loads (i.e. imagesLoaded correctly doesn't not fire immediately). The second time you load the page, and every subsequent time, you will NOT see the loading image and you will see the picture gradually load (i.e. imagesLoaded incorrectly fires immediately).

In Firefox, go to History --> Clear Recent History --> Select Cache & clear it. Then reload the page and it will work as expected.

@lesjames I'm assuming your workaround is no longer relevant given that I couldn't find anything checking height in the source?

@desandro any ideas for a workaround here?

Thanks a lot.

[desandro]

@danxshap I am not able to reproduce this issue on Firefox 26.

[danxshap]

@desandro Interesting. I wonder if it's a 25 --> 26 thing or OS-related...are you on OS X or Windows or what? This is absolutely a reproducible issue on my machine, exactly as I described. Frustrating.

Can anyone else please try out the plunker, then refresh the page, and confirm that you see the loading indicator image the second time around?

http://plnkr.co/edit/nkKNKz3Unesc6GwOUsXf?p=preview

[danxshap]

@desandro I can confirm that this issue is reproducible on Firefox Nightly 28.0a1 on my machine.

See here exactly what I mean: https://www.dropbox.com/s/5cqj6ju8nushkp8/imagesloadedfirefox.mov

[gebeer]

I'm experiencing early firing with my application and with danxshaps code on FF 25.0 Linux.

Has this issue been addressed and added to master already?

[djandreski]

@desandro I think you are on the right track about this issue. The ImagesLoaded emits the events in proper way when they are loaded for first time, but not when their src attribute is changed.
I have this problem on Firefox 28 (Windows 7).

[dominikwilkowski]

👍 for a fix. Still broken in FF 30

[aleksandarveljanov]

@lesjames hey James, I read your comments up above on that height thing, where you said you changed it to be greater than 1. Could you please provide that code for me ? It may be the key to the imageLoading problem I have with FF.

[aleksandarveljanov]

@desandro Can you tell me if the fix with the "height greater than 1" that lesjames wrote about was added in the master ?

[lesjames]

@aleks989 Looks like the change I made is now on line 250

The edit I made was in v3.0.4 and I haven't used this repo in a long time. Not sure if my edit is still relevant. Here is what I had...

    // If complete is true and browser supports natural sizes,
    // try to check for image status manually.
    if ( this.img.complete && this.img.naturalWidth > 1 ) {
      // report based on naturalWidth
      this.confirm( this.img.naturalWidth > 1, 'naturalWidth' );
      return;
    }

[aleksandarveljanov]

@lesjames Thanks James, I tried it out, but it doesn't work. Firefox (now 32) is still firing up the images faster than it actually takes them. @desandro is an actual fix to this coming anytime soon ?

[0xadri]

Wow, that's a long long thread here.

I just had a look at the jsfiddle posted by the OP, namely http://jsfiddle.net/7MeV6/3/

And you can see in javascript panel, at some point jQuery('#item-image img').hide().attr('src', 'http://fl.chrisjohansson.com/wp-content/uploads/'+match[1]+'.jpg'); //hide the main image and switch out it's source.

So basically, the src attribute is being changed.

There is an issue regarding "Problems with Firefox after chaging the src attribute of an image" #121

I suspect it is all coming from there.

Note: the good news is that there is a "not-fully-tested" workaround in that ticket

[danxshap]

@adrien-be there is no changing of the src attribute here, and the issue is very clear in Firefox: http://plnkr.co/edit/1OhmxFQuFJhX3SRIWjgs?p=preview

The loading indicator is shown while the image loads the first time. If you click run again, you'll see the image is displayed instantly (while it loads) and there is no loading indicator. Clear your browser's cache and run again: the loading indicator displays :-\

[0xadri]

@danxshap I am testing on Firefox 33 on Windows OS & can't see the point you're trying to make. Either this is because of my version of Firefox, either the image is loaded too fast even when not cached.

Do you mind trying this below example to test? It uses lorempixel.com to get new image URLs every time you click on "add images", that's the technic desandro uses in the live demo of imagesLoaded official page (a pretty sweet technic actually).

http://jsbin.com/noboke/2/edit?js,console,output - just click on "add images" (output panel)

Note: feel free to make this test better, for now it "only" display the text 'done' in the console (on always() event), I'll try to think of something more reliable but for now I guess that'll do the job

[danxshap]

@adrien-be that example doesn't help with this issue because this issue is only when the same image is loaded more than one time in a single browser session.

Check out this screen cast I just made on Firefox 33 on Mac: http://d.pr/v/1hBZR

The first time it loads, you see the loading indicator briefly until the image is fully loaded and ready to be displayed. When I re-run the plunkr, you don't see the loading indicator at all, and the image gradually loads down the page, which is exactly what I'm trying to avoid by using imagesLoaded + a loading gif in the first place.

Maybe this is just a Mac+Firefox issue? This doesn't happen on Chrome for me.

[aleksandarveljanov]

This worked for me on FF, https://github.com/alexanderdickson/waitForImages, so you should bassicly see how it's done here and I recommend implementing the solution to the imagesloaded plugin as well. All versions on FF work perfectly for me now.

[desandro]

imagesLoaded v3.2.0 has a fix for the Firefox hang up. [Try it out] and report back if you feel this issue has been resolved.

[danxshap]

@desandro issue does not appear to be resolved: http://plnkr.co/edit/kaaCwMc2oN5gBEn4UNRb?p=preview

The exact same behavior as I described above / last year still happens with the latest library.

[desandro]

@danxshap I'm not able to reproduce the bug with this test case

[danxshap]

@desandro here's a screencast with the latest libraries demonstrating the issue: http://d.pr/v/11Yos

Anyone else seeing this too?

[desandro]

@danxshap Ah, thanks for reminding me of the original issue — imagesLoaded triggers before the image has completely rendered on screen. Okay, I'll keep this issue open.

[desandro]

This issue has been quiet for a while. I'm going to to close it. Please open a new separate issue if you run into trouble with Firefox or Windows.