imagesloaded plugin sometimes doesn't load image properly

Question

I'm building an app which loads multiple images and animates them in. In order to do that I need to load the image, grab the width and set the margin-left to the width of the image. This works most of the time, but sometimes the imagesloaded plugin thinks the image is loaded, but when I access the width it comes out as NaN.

    $(fragment).imagesLoaded()
    .done( function() {
        console.log('done');
    })
    .always( function( instance ) {
        console.log('all images loaded');
    })
    .fail( function() {
        console.log('all images loaded, at least one is broken');
    })
    .progress( function( instance, image ) {
        var result = image.isLoaded ? 'loaded' : 'broken';
        console.log( 'image is ' + result + ' for ' + image.img.src );

        $.each(elems, function( k, v ) {
            var imagewidth = image.img.width * $('.row').height() / image.img.height;
            console.debug('---------------------');
            console.debug('v: ', v);
            console.debug('v.width: ', imagewidth);
            console.debug('isNaN: ', isNaN(imagewidth));
            if (isNaN(imagewidth)) {
                $(v).css({'margin-left': '-' + imagewidth + 'px', 'margin-right': '100px'});
                $(v).stop().animate({'margin-left': 0, 'margin-right': 0}, 400, 'easeOutCubic');

            }

        });
    });

Any suggestions / ideas appreciated. I'm using Google Chrome on a Mac!

Answer 1

looks like this is a bug in the imagesloaded plugin related to width not being available for cached images in chrome. Someone has pushed the following fix which solved the issue for me:

https://github.com/nyroDev/imagesloaded/commit/51288c54bca5b36137d3065a6b45dee6f02a2a90