javascript - 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'); 
            }
        });