Problems with FF 26 after chaging src atr. of an image

[individual-it]

In my application I have to exchange an image constantly with a new one (webcam).
So I have 2 img tags. While one image is shown the other is loaded. As soon the second image is loaded the first one is hidden and the second one is shown. Then again the first one gets a new src= and loads a new image. As soon as it finished it gets shown.
I'm using this plugin to see if the new image is loaded before I hide the first one and show the second one.

$('#imageFrame1_' + newImage).attr( "src", data.responseText );
var imgLoad = imagesLoaded( '#imageFrame1_' + newImage);
imgLoad.on( 'always', function( instance ) {
console.log('#imageFrame1_' + newImage + ' loaded ' + Date.now());
$('#imageFrame1_' + newImage).show();
$('#imageFrame1_' + currentImage).hide();
//more code here
}); 

the first time an image is loades "imgLoad.on" is fired correctly after the image loading is finished. But when I change the src, its fired immediately without waiting for the new image to be loaded.

This happens with Firefox 26.0 on Linux. Chrome works as it should.

[tremby]

I'm having the same problem.

[Hiswe]

I have the same problem on firefox 28 replacing a dummy src (base64 encoded blank gif) with the real real src.

[Kris-B]

I'm having the same issue with FF30...
@tremby @Hiswe @individual-it -> did you find any workaround?

[Hiswe]

Just changing the source was not enough.
So I have just replace the tag by a clone with the new source… And it's working as expected.

[Kris-B]

@Hiswe - thanks for your feedback!
In the meantime I found another workaround: set the src to "" before setting the new url.

[Kris-B]

BTW: this is not an imagesloaded issue, but usage of imagesloaded can be impacted by this FF issue...

[tremby]

Honestly I don't even remember which project I was working on when I hit this issue. Grepping my source base is inconclusive -- I may have set the src to the empty string as Kris-B suggests above, or I may have switched to a homegrown solution.

[0xadri]

@Kris-B Your workaround works perfectly in Firefox 33 !

Live demos showing Kris-B's solution:

• NOT using your workaround: http://jsbin.com/yujaxamufu/1/edit?js,console,output (fails on FF, as expected)
• Using your workaround: http://jsbin.com/wisawa/1/edit?js,console,output (works on FF)

If you test both solutions on Firefox, you will see the "done" message appearing in the console: too early when NOT using your workaround, & just when expected when using it.

Things to note about the tests I have done:

• I have only tested on Firefox on Windows 7 for desktop
• I have only tested the always() event (not the others)

Conclusion

Until the workaround found by Kris-B is fully tested, you're probably "safer" by using imagesLoaded only on newly added images element.

[Kris-B]

thanks for your feedback @adrien-be ;-)

[tilt-me]

@Kris-B
Be careful, setting the src of an image to an empty string can be dangerous for performance reasons:
Empty image src can destroy your site

Don't know if it is still an issue for modern browsers, but I would avoid it anyway ;)