javascript - 图片加载时和加载后的尺寸不同

Question

我有一个页面加载了很多相当大的图像(大约 200 张 100Kb 图像 [大约 600 x 400 像素])。

我想要做的是处理肖像照片，而不是风景照片。

我遇到的问题是，当我使用javascript在加载时获取肖像照片的属性时，高度明显低于应有的高度，而宽度则大于应有的宽度。具体来说，75 x 100 图像被视为 100 x 16。因此，当函数运行该图像时，该图像被视为横向图像，而不是纵向图像，并会跳过。

我很难确定问题所在，因为该属性在加载完成后将其显示为 75 x 100 像素的图像。

有办法解决这个问题吗？或者在所有图像加载后运行该函数？

Answer 1

加载后运行该函数，您可以这样做:

仅使用 DOM

var newImg = document.createElement('img');
newImg.src = "theImage.png";
newImg.alt = "Always specify an alternate text for accessibility, even if left blank";
newImg.onload = function () {
    //Image manipulation
};
galleryNode.appendChild(newImg); //Replace galleryNode with the parent element of your image.

使用innerHTML

galleryNode.innerHTML += "<img src='theImage.png' alt='' id='newImage1'/>";
var newImg = document.getElementById('newImage1');
newImg.onload = function () {
    //Image manipulation
};

使用 jQuery

$('.gallery img').live('load',function () {
    //Image manipulation
});