imagesloaded 插件有时无法正确加载图像答案

【问题标题】：imagesloaded plugin sometimes doesn't load image properlyimagesloaded 插件有时无法正确加载图像
【发布时间】：2014-06-09 10:48:35
【问题描述】：

我正在构建一个应用程序，它可以加载多个图像并对其进行动画处理。为此，我需要加载图像，获取宽度并将 margin-left 设置为图像的宽度。这在大多数情况下都有效，但有时 imagesloaded 插件认为图像已加载，但当我访问宽度时，它会显示为 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');

            }

        });
    });

任何建议/想法表示赞赏。我在 Mac 上使用 Google Chrome！

【问题讨论】：

标签： javascript jquery image jquery-masonry imagesloaded

【解决方案1】：

看起来这是 imagesloaded 插件中的一个错误，与宽度不可用于 chrome 中的缓存图像有关。有人推送了以下修复程序，为我解决了这个问题：

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

【讨论】：