Question

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

我想要做的是操纵照片，如果是肖像，而不是风景。

我遇到的问题是，当我在加载时使用javascript抓取肖像照片的属性时，高度明显低于应有的高度，并且宽度大于应有的宽度。具体来说，75 x 100图像被认为是100 x 16.因此，当该功能贯穿此图像时，图像被视为风景，而不是肖像，并跳过。

我很难确定问题，因为该属性在加载完成后会显示为75 x 100px图像。

有没有办法解决这个问题？或者在加载所有图像后运行该功能？

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

Answer 2

在页面元素加载完成后运行javascript总是一个好主意。我通常在jQuery中执行此操作，如下所示：

$(function(){
  //code to run after load goes here
});

否则，您可以尝试修改body标签并为其赋予onload属性，例如：

<body onload="myFunction();" >

图像的尺寸与加载时和加载后的尺寸不同

2 个答案: