18.09.2012, 21:23
|
Аспирант
|
|
Регистрация: 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() {
....
}
результатов не дало, перелопатил инет, различные примеры результата не дали. Надеюсь на вашу помощь...
|
|
18.09.2012, 21:31
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
Сообщение от skillful
|
результатов не дало,
|
пример кода. должно было дать результат.
|
|
20.09.2012, 19:55
|
Аспирант
|
|
Регистрация: 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.
|
|
20.09.2012, 23:25
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
img.src = href;
это надо делать не в обработчике события load.
|
|
20.05.2014, 09:09
|
Интересующийся
|
|
Регистрация: 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 и прочего) все-все...
}
|
|
20.05.2014, 12:12
|
sinistral
|
|
Регистрация: 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.
|
|
20.05.2014, 12:17
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
|
14.09.2015, 12:26
|
|
Профессор
|
|
Регистрация: 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+';');
|
|
14.09.2015, 13:38
|
|
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
psfdek, и что это? onload асинхронно выполняется.
|
|
|
|