Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.09.2012, 21:23
Аспирант
Отправить личное сообщение для skillful Посмотреть профиль Найти все сообщения от skillful
 
Регистрация: 18.09.2012
Сообщений: 55

Узнать размеры картинки jQuery
Здравствуйте! Уже несколько дней бьюсь над проблемой получить размеры загруженной картинки во всех браузерах.

Код такой

var href = "картинка.jpg";

var img = new Image();
img.src = href;

var imgWidth = img.width; //длина картинки*/

alert(imgWidth);


imgWidth срабатывает когда уже картинка была загружена ранее, т.е. кэширована браузером.


С помощью функции

Img.onload = function() {
....
}

результатов не дало, перелопатил инет, различные примеры результата не дали. Надеюсь на вашу помощь...
Ответить с цитированием
  #2 (permalink)  
Старый 18.09.2012, 21:31
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от skillful
результатов не дало,
пример кода. должно было дать результат.
Ответить с цитированием
  #3 (permalink)  
Старый 20.09.2012, 19:55
Аспирант
Отправить личное сообщение для skillful Посмотреть профиль Найти все сообщения от skillful
 
Регистрация: 18.09.2012
Сообщений: 55

var href = "картинка.jpg";
var img = new Image();

var imgWidth;
img.onload = function() {	
img.src = href;
alert(this.width + 'x' + this.height); // здесь работает
imgWidth = this.width;
}

alert(imgWidth + 'x'); // здесь не работает

Последний раз редактировалось skillful, 20.09.2012 в 20:09.
Ответить с цитированием
  #4 (permalink)  
Старый 20.09.2012, 23:25
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

img.src = href;

это надо делать не в обработчике события load.
Ответить с цитированием
  #5 (permalink)  
Старый 20.05.2014, 09:09
Интересующийся
Отправить личное сообщение для rafonets Посмотреть профиль Найти все сообщения от rafonets
 
Регистрация: 07.07.2011
Сообщений: 24

Хоть и с опозданием на 2 года, но т.к. попал на тему с поисковика, думаю будет актуально и для других, вот рабочий код (у меня):

var href = "картинка.jpg",
     imgWidth,
     img = new Image();

img.onload = function(){
  alert(img.width + 'x' + img.height); // здесь работает
  imgWidth = img.width;
}
img.src = href;

// Здесь не заработает, т.к. переменная imgWidth пустая..., она
//заполнится после загрузки картинки, а алерт сработает сразу.
alert(imgWidth + 'x'); // здесь не работает

// Делаем так:
window.onload = function(){
   alert(imgWidth + 'x'); // здесь работает
   // Вызывается после полной загрузки страницы.
   // (картинки, css, js, html и прочего) все-все...
}
Ответить с цитированием
  #6 (permalink)  
Старый 20.05.2014, 12:12
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от rafonets Посмотреть сообщение
Хоть и с опозданием на 2 года, но т.к. попал на тему с поисковика, думаю будет актуально и для других, вот рабочий код (у меня):

var href = "картинка.jpg",
     imgWidth,
     img = new Image();

img.onload = function(){
  alert(img.width + 'x' + img.height); // здесь работает
  imgWidth = img.width;
}
img.src = href;

// Здесь не заработает, т.к. переменная imgWidth пустая..., она
//заполнится после загрузки картинки, а алерт сработает сразу.
alert(imgWidth + 'x'); // здесь не работает

// Делаем так:
window.onload = function(){
   alert(imgWidth + 'x'); // здесь работает
   // Вызывается после полной загрузки страницы.
   // (картинки, css, js, html и прочего) все-все...
}
Прошло 2 года, а рабочий нормальный код теперь такой :

(function (global, name, def) {
  if (typeof (define) == 'function' && define['amd']) define(name, def);
   else global[name] = def();
}) (this, 'loadImage', function () {
  return function (imageSrc, done) {
    var q = new Promise(function (res, rej) {
      var img = new Image();
      img.src = imageSrc;
      img.onerror = function (e) {
        rej(e);
      };
      img.onload = function (e) {
        res(img);
      };
      if (img.complete) res(img);
    });
    return q;
  }
});

loadImage('http://upload.wikimedia.org/wikipedia/ru/8/8d/ImageComicsLogo.gif').then(function (img) {
  alert('Картинка: ' + img);
}, function (e) {
  alert('Ошибка при загрузке картинки: ' + e);
});

Последний раз редактировалось melky, 20.05.2014 в 13:40.
Ответить с цитированием
  #7 (permalink)  
Старый 20.05.2014, 12:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

на всякий случай http://caniuse.com/#search=Promise
Ответить с цитированием
  #8 (permalink)  
Старый 20.05.2014, 13:39
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от рони Посмотреть сообщение
на всякий случай http://caniuse.com/#search=Promise
Тут нет проблемы подключить полифил
https://github.com/jakearchibald/es6-promise


жаль, что с flexbox так просто нельзя обойтись
Ответить с цитированием
  #9 (permalink)  
Старый 14.09.2015, 12:26
Аватар для psfdek
Профессор
Отправить личное сообщение для psfdek Посмотреть профиль Найти все сообщения от psfdek
 
Регистрация: 14.02.2014
Сообщений: 157

Мне кажется что так само просто. Чем некоторый огород что тут нагородили
function imgSize(href){
        var img = new Image();
        img.src = href;
        
        img.onload = function() {
            return img;
        };
        return img;
    }
        var imgZz = imgSize('http://javascript.ru/forum/images/ca_serenity/misc/logo.gif');
        alert('ширина: '+imgZz.width+';');
        alert('Высота: '+imgZz.height+';');
Ответить с цитированием
  #10 (permalink)  
Старый 14.09.2015, 13:38
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

psfdek, и что это? onload асинхронно выполняется.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вопрос по jquery - как узнать какой тэг? APL Общие вопросы Javascript 7 09.06.2016 15:22
В IE не извлекаются размеры скрытой картинки ingwarr Events/DOM/Window 35 25.04.2012 12:08
Узнать os юзера на jquery BorisBritva jQuery 2 28.03.2012 15:22
Размеры картинки JetPak jQuery 2 30.01.2012 14:22
Узнать размер картинки через форму file Sergey67 Общие вопросы Javascript 1 24.12.2011 06:37