Размер изображения отличается от того, когда он загружается и после того, как он загружается - PullRequest
Новая
       1

Размер изображения отличается от того, когда он загружается и после того, как он загружается

0 голосов
/ 26 сентября 2010

У меня есть страница, которая загружает много довольно больших изображений (около 200 из 100Кб изображений [около 600 х 400 пикселей]).

Я пытаюсь манипулировать фотографией, если она портретная, а не пейзажной.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я использую javascript для захвата свойств портретной фотографии при загрузке, высота значительно ниже, чем должна быть, а ширина больше, чем должна быть. В частности, изображение 75 x 100 рассматривалось как 100 x 16. Поэтому, когда функция проходит через это изображение, изображение считается альбомным, а не портретным и пропускается.

Мне было трудно определить проблему, потому что свойство показывает его как изображение размером 75 x 100 пикселей после того, как оно завершит загрузку.

Есть ли способ обойти эту проблему? или запустить функцию после загрузки всех изображений?

Ответы [ 2 ]

2 голосов
/ 26 сентября 2010

Запустите функцию после ее загрузки. Вы сделаете это так:

Использование исключительно 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
});
0 голосов
/ 26 сентября 2010

Всегда полезно запускать javascript после завершения загрузки элементов страницы. Я обычно делаю это в jQuery, например: 

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

В противном случае вы можете попробовать изменить тег body и присвоить ему атрибут onload, например: 

<body onload="myFunction();" >
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...