Does imagesLOaded not fire when the src attribute of an img element is changed with javascript?

[k-risc]

I am using imagesloaded.pkgd.min.js and use the following javascript:

    …
$('#payable-preview a .overlay').show();
$('#payable-preview a img')
    .attr('src', …);
$('#payable-preview a img').imagesLoaded()
    .always(function() {
        $('#payable-preview a .overlay').hide();
    });

But the function defined in "always()" is triggered immediately each time this code is executed. Thus the overlay is never visible because it gets hidden right after it was shown.

[yairEO]

maybe try wrapping the imagesLoaded call with a setTimeout with like 10ms?

[saumets]

I'm having this issue as well but in my situation I am completely replacing an img tag with a new one containing a different src image using jquerys replaceWith(). Am using imagesLoaded after the replaceWith() call to fire a new "fade-in" effect once the image is loaded. It seems to occur randomly but sometimes imagesLoaded seems to just instantly fire its complete/always message, leading to me getting an incorrect height calculation (0px) on the container w/ the new image.

is the setTimeout the way to go?

EDIT: I wrapped a setTimeout with a 100ms delay around my imagesLoaded call and everything seems to be working now. Hrmph?

[0xadri]

@skalfyfan do you have a live demo for this bug (a jsbin or jsfiddle) ?

[yairEO]

Actually imagesloaded fails rarely, but the reason is unknown. Sometimes I use setTimeout as a failsafe but it's an ugly hack.

[0xadri]

@k-risc The answer to your question, in short: Yes, imagesLoaded does not fire when the src attribute of an img element is changed with javascript, this happens with Firefox. see https://github.com/desandro/imagesloaded/issues/121

Until the workaround mentioned in this issue is fully tested, you're probably "safer" by using imagesLoaded only on newly added images element.

[0xadri]

@yairEO you more details regarding this on https://github.com/desandro/imagesloaded/issues/121