Javascript高度问题

Question

我正在使用javascript为页面上的所有图片文章添加垂直或水平类。我遇到了代码正常工作的问题，但它总是在文章类中添加.horizo​​ntal，甚至是应该有.vertical的照片（包含大于450px高的图像的帖子）。任何帮助将不胜感激。

$('img.photo').each(function(){
            if($(this).height() > 450) { 
                $(this).closest('article').addClass('vertical'); 
            } else {
                $(this).closest('article').addClass('horizontal'); 
            }
        });

示例：http://blog.jamescharless.com/ 这个男孩的第一张照片高度超过450像素，但没有垂直等级，而是水平。

Answer 1

高度不符合预期的两个可能原因

1. 图片尚未加载且CSS中没有定义的高度
2. 图片尚未显示（display: none）

您的代码可以使用load回调，还应检查图片是否为:hidden。

$(function(){
    $('img:not(:hidden)').load(function(){
        // logic
    });
});

Answer 2

尝试将.each更改为.load，以便在每张图片加载后调用该函数：

$('img.photo').load(function(){
            if($(this).height() > 450) { 
                $(this).closest('article').addClass('vertical'); 
            } else {
                $(this).closest('article').addClass('horizontal'); 
            }
        });