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

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

1 голос
/ 01 сентября 2011 
function loader(img) {
        var imgH = img.height;
        var imgW = img.width;
        console.log(imgH, imgW);    
    };

img = new Image();
img.src ='../images/pic1.jpeg';
img.onLoad = loader(img);

Итак, исключено, что я получу размер изображения, но я получил "0 0" в консоли.И размер изображения 500X700.Что не так с этим кодом?

Ответы [ 4 ]

3 голосов
/ 01 сентября 2011

Это не имеет смысла: 

img.onLoad = loader(img);

вы хотите передать фактическую функцию событию: 

img.onload = loader;

и использовать this вместо img в функции.

Также вам нужно назначить событие перед изменением свойства src изображения.

Также обратите внимание, что существует множество проблем с событием загрузки изображений.Из руководства jQuery по load ():

Предостережения о событии load при использовании с изображениями

Распространенную проблему, которую разработчики пытаются решить с помощью .load() ярлык для запуска функции, когда изображение (или коллекция изображений) полностью загружено.Есть несколько известных предостережений с этим, которые следует отметить.Это:

  • Он не работает согласованно и надежно кросс-браузерно
  • Он не работает корректно в WebKit, если для src изображения установлен тот же src, что и раньше
  • Не правильно всплывает дерево DOM
0 голосов
/ 04 января 2014

Я обнаружил, что лучший способ - сначала позволить компьютеру выполнить масштабирование.

и объявление onload = "some_function ()" в теле. 

<body onload="some_function()">

и затем получение размеров в сценарии. 

some_function(){

var image1 = document.getElementsByClassName('main')[0];
var computedStyle_image1 = window.getComputedStyle(image1);
var image_width = computedStyle_image1.getPropertyValue('width');

}

Я заметил, что с Google Chrome вам нужно убедиться, что вы вызываете onload = "function" внутри тела div, в противном случае значения изображения не могут быть установлены, и он вытягивает 0px для ширины и высоты.

0 голосов
/ 06 сентября 2011

Я использовал этот способ: 

img.onload = function(){//here wrote everything from loader};

И это было единственное рабочее решение, которое я нашел.

0 голосов
/ 01 сентября 2011

Попробуйте это: 

function loader(){
    var imgH = this.height;
    var imgW = this.width;
    console.log(imgH, imgW); 
}
var img = new Image();
img.onload = loader;
img.src ='../images/pic1.jpeg';
...