Question

我正在构建一个加载多个图像并为其设置动画的应用程序。为此，我需要加载图像，抓取宽度并将边距设置为图像的宽度。这在大多数情况下都有效，但有时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上使用谷歌浏览器！

Answer 1

看起来这是一个与加载的插件相关的错误，该插件与chrome中的高速缓存图像不可用。有人推出了以下解决方案，解决了我的问题：

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

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

1 个答案: