基于Javascript的图像方向检测

我试图找到一种方法来检测图像的方向（横向或纵向）

HTML只包含几个img标记，源代码已经填充。然后，脚本应该检测方向并将图像添加到动态创建的div中，作为缩略图

我一直使用的脚本是这个（在这里的某个地方找到）

for（i=0；ithis.naturalWidth）{
this.classList.add（“肖像”）
}否则{
this.classList.add（“景观”）
}
})
}

现在，当第一次加载页面时，这通常可以正常工作。但是，刷新时，其行为不稳定，将正确的类添加到某些图像中，而不将任何类添加到其他图像中

我也试过这个

for (i = 0; i < pics.length; i++) {
  var img = pics[i];
  var width = img.naturalWidth;
  var height = img.naturalHeight;
  if (height > width) {
    img.classList.add("portrait")
  } else {
    img.classList.add("landscape")
  }
}

for（i=0；i宽度）{
img.classList.add（“肖像”）
}否则{
img.classList.add（“景观”）
}
}

这也是不可预测的。所有图像都添加了一个类，但有些图像的类是错误的

我猜问题可能来自于在脚本运行之前没有完全加载图像，因此脚本无法正确测量它们，但我不确定。不管怎样，我也不知道该怎么修

为了让大家了解我的目的，这里有一个指向页面的链接：

---

非常感谢您的任何想法

对于更安全但更昂贵的方法，您可以在内存中复制图像并添加相应的类

const images=[…document.querySelectorAll（'img'）].map（el=>{
返回新承诺（（解决、拒绝）=>{
设img=新图像（）；
img.addEventListener（'load'，function（）{
常数{
自然重量，
自然宽度
}=img；
如果（自然高度>自然宽度）el.classList.add（“肖像”）；
else el.classList.添加（“景观”）；
img=null；//GC
解决（）；
});
img.src=el.src；
});
});
img{
边框：1px实心；
}
.景观{
边框颜色：红色；
}
.肖像{
边框颜色：蓝色；
}
如果调用
pic.addEventListener（“加载”，…）
时图像已经加载，则不会触发加载事件处理程序。如果
pic.complete
为true，则应调用它，如中所建议


var pics=document.querySelectorAll（“img”）；
var-pic；
对于（i=0；iimg.naturalWidth）{
img.classList.add（“肖像”）
}否则{
img.classList.add（“景观”）
}
}
img{
边框：1px实心；
}
.景观{
边框颜色：红色；
}
.肖像{
边框颜色：蓝色；
}

谢谢你的帮助

ConnorsFan，根据你之前的评论，我添加了一个部分来考虑已经加载的图像，并提出了这个

// forgot to mention this part in my original post
var pics = document.getElementsByTagName("img");

for (i = 0; i < pics.length; i++) {
    pics[i].addEventListener("load", function() {
        if (this.naturalHeight > this.naturalWidth) {
            this.classList.add("portrait")
        } else {
            this.classList.add("landscape")
        }
     })  
     if (pics[i].complete) {
         if (pics[i].naturalHeight > pics[i].naturalWidth) {
             pics[i].classList.add("portrait")
         } else {
             pics[i].classList.add("landscape")
         }
     }
 }

//在我原来的帖子中忘了提到这一部分
var pics=document.getElementsByTagName（“img”）；
对于（i=0；ithis.naturalWidth）{
this.classList.add（“肖像”）
}否则{
this.classList.add（“景观”）
}
})  
如果（图片[i]。完成）{
if（pics[i].自然高度>pics[i].自然宽度）{
pics[i].classList.add（“肖像”）
}否则{
pics[i].classList.add（“景观”）
}
}
}

这是可行的，但您的解决方案似乎更优雅，所以我可能会使用该解决方案
 您的脚本是在页面的顶部还是底部？此脚本应在页面加载完成后执行。现在如何执行它？它位于页面底部，或者至少在tumblr允许的范围内（因为它添加了一些自己的自动脚本），因此理论上应该在脚本之前加载图像。
// forgot to mention this part in my original post
var pics = document.getElementsByTagName("img");

for (i = 0; i < pics.length; i++) {
    pics[i].addEventListener("load", function() {
        if (this.naturalHeight > this.naturalWidth) {
            this.classList.add("portrait")
        } else {
            this.classList.add("landscape")
        }
     })  
     if (pics[i].complete) {
         if (pics[i].naturalHeight > pics[i].naturalWidth) {
             pics[i].classList.add("portrait")
         } else {
             pics[i].classList.add("landscape")
         }
     }
 }