Узнать размеры картинки jQuery
Здравствуйте! Уже несколько дней бьюсь над проблемой получить размеры загруженной картинки во всех браузерах.
Код такой var href = "картинка.jpg"; var img = new Image(); img.src = href; var imgWidth = img.width; //длина картинки*/ alert(imgWidth); imgWidth срабатывает когда уже картинка была загружена ранее, т.е. кэширована браузером. С помощью функции Img.onload = function() { .... } результатов не дало, перелопатил инет, различные примеры результата не дали. Надеюсь на вашу помощь... |
Цитата:
|
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'); // здесь не работает |
img.src = href; это надо делать не в обработчике события load. |
Хоть и с опозданием на 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 и прочего) все-все... } |
Цитата:
(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); }); |
;) на всякий случай http://caniuse.com/#search=Promise
|
Цитата:
https://github.com/jakearchibald/es6-promise :dance: жаль, что с flexbox так просто нельзя обойтись |
Мне кажется что так само просто. Чем некоторый огород что тут нагородили :)
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+';'); |
psfdek, и что это? onload асинхронно выполняется.
|
Часовой пояс GMT +3, время: 23:50. |