我正在构建一个应用程序，它可以加载多个图像并对其进行动画处理。为此，我需要加载图像，获取宽度并将 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 上使用谷歌浏览器！