Question

我当前正在使用

jQuery(document).ready(function() {
    jQuery("img").each(function() {

        // Calculate aspect ratio and store it in HTML data- attribute
        var aspectRatio = jQuery(this).width()/jQuery(this).height();
        jQuery(this).data("aspect-ratio", aspectRatio);
               // Conditional statement

        if(aspectRatio > 1) {
            // Image is landscape

            jQuery( this ).addClass( "landscape" );

        } else if (aspectRatio < 1) {
            // Image is portrait
            jQuery( this ).addClass( "portrait" );;
        } else {
            // Image is square
            jQuery( this ).addClass( "square" );;            
        }
    });
});

但是每次都只是返回风景。

我想要做的就是为肖像图像创建一个类，这样我就可以使用CSS将它们的宽度和宽度并排设置为50％，而横向图像的宽度为100％。

Answer 1

我无法评论，因为声誉太低，但是我认为您的错误可能是由于您在.each()而不是$(document).ready()上进行$(window).load() >

$(document).ready()等待DOM操作安全，但不等待所有图像和其他内容加载。

$(window).load()等待所有内容加载后执行

它们很可能全部以横向形式出现，因为它们很短（只有alt文本高度）却很长（alt文本宽度）

Answer 2

根据我的评论，这是一个可行的解决方案。我使用$（window）.load而不是$ .ready来等待图像完成加载。另外，在.each循环中，我使用index和element来避免使用“ this”。这样做的主要原因是因为它是非描述性的，因此，在较大的代码段或嵌套循环中，使用此代码可能会带来不良影响。

$(window).load(function() {
    jQuery("img").each(function(index, element) {

        // Calculate aspect ratio and store it in HTML data- attribute
        var aspectRatio = $(element).width()/$(element).height();
        $(element).data("aspect-ratio", aspectRatio);
               // Conditional statement

        if(aspectRatio > 1) {
            // Image is landscape

            $(element).addClass( "landscape" );

        } else if (aspectRatio < 1) {
            // Image is portrait
            $(element).addClass( "portrait" );;
        } else {
            // Image is square
            $(element).addClass( "square" );;            
        }
    })
});

在jQuery中找到图像方向？

2 个答案: