Казалось бы, обычная задача – взять height и width картинки, а нет – то один браузер конючит, то другой… решение следующие:
// берем все необходимые нам картинки
var $img = $('img');
// ждем загрузки картинки браузером
$img.load(function(){
// удаляем атрибуты width и height
$(this).removeAttr("width")
.removeAttr("height")
.css({ width: "", height: "" });
// получаем заветные цифры
var width = $(this).width();
var height = $(this).height();
});
// для тех браузеров, которые подгрузку с кеша не считают загрузкой, пишем следующий код
$img.each(function() {
var src = $(this).attr('src');
$(this).attr('src', '');
$(this).attr('src', src);
});
Оригинально)
Великий могучий JavaScript!
Интересное решение, довольно оригинальное.
Все они нормально считают, просто событие load у картинок из кэша наступает быстрее, чем DOMContentLoaded, и ничего в этом нелогичного нет. Состояние готовности изображения можно проверить, получив его свойство complete.
imageObject = new Image(); imageObject.onload = function() { w = imageObject.width; h = imageObject.height; }чем плохо это решение?
Тем, что картинки которые уже находятся в кэше загрузятся раньше чем скрипты. Т.е. onLoad у них произойдет несколько раньше, чем ты сумеешь привязать его к ДОМ-объекту. И в итоге ты не успеешь забрать размер картинки.
Спасибо и Вам.Просто не все так умеют
как я понял данное решение является кроссобраузерным? не будет траблов например с ie6?
На IE6 уже давно ничего не тестирую, на IE7, IE8, Safari, Opera, FF – всё ок…
Вы меня извините, но последний пасс – это настоящая пляска с бубном… Нельзя ли как-нить поизящнее? Например, нициировать эвент «load»? )) .load()
А вы пробовали?..
Нет, отсюда и предположение)
Это все замечательно, но не кажется ли вам что после:
$(this).removeAttr("width") .removeAttr("height") .css({ width: "", height: "" });Уже загруженное масштабированное изображение станет своих реальных размеров и расползется по всему окну браузера, если оно достаточно большое?
После получения размеров их можно вернуть обратно…
А если уж очень страшно, можно загнать изображение на 10000 пикселей вправо на время удаления атрибутов, так чтоб браузер не рендерил его лишний раз.
Потестил кодик в: ie6, ie7, ie8, FF4, Chrome 12, Safary 4 и 5, Opera 9.50 и 11.10. Прекрасно работает без этого странноватого кусочка с 16 по 19 строки. Картинки грузил с реального сервера, тестировал в каждом браузере три раза:
1. С чистым кэшем.
2. С закэшированными изображениями.
3. С очищенным вручную кэшем.
Думал что будут проблемы в операх, с их странным отношением к кэшу, но и в них, во всех случаях, размеры каждого изображения прекрасно определялись. Можете пояснить какие именно браузеры имели ввиду в комментарии в строке 16?
Это был IE, не помню какие настройки были кеширования, и какая версия jQuery.
Рекомендую для обхода ‘!important’, прописанного в таблицах стилей воспользоваться
$(this).css('cssText', 'width: auto !important; height: auto !important;');//Ну и, соответственно, желательно бы предварительно сохранить через: $(this).attr('style'); //А то мало ли что там былоОООгромнейшее спасибо!!!Я уже было разочаровался с этими размерами при первой загрузке .Попробую и я так сделать
ОГРОМНЕЙШЕЕ СПАСИБО,добрый человек!!! Подставил Ваше решение в мой казалось безнадежный скрипт и …ОПА! Все заработала как надо!!!
у меня центрировалось изображение в диве скриптом.Так вот _при первой загрузке не ловились размеры изображения в Мозилле. В опере же -все ОК было.
Мозилла достает размеры при попадании картинки в кеш.а иначе-никак. Теперь -все ОК!
Стает по центру сразу!!!
Спасибо, работает. Очень было нужно в проекте
Помогло блин… забыл я вообще про событие load )))
уже реализовал AJAX-ом и php-функцией GetImageSize
но там была 1 картинка, а потом когда на список наткнулся – решил что Ajax – не катит))))
Автору респект!
Я бы лучше сделал это так, а то в фаерфоксе все картинки, что в теге img стали одинаковыми:
// для тех браузеров, которые подгрузку с кеша не считают загрузкой, пишем следующий код
$img.each(function() {
var src = $(this).attr(‘src’);
$(this).attr(‘src’, ”);
$(this).attr(‘src’, src);
});
Подскажите, что делать, если картинка наследует аттрибуты width и height от родительских стилей CSS?
Я так понимаю, этот блок удаляет только собственные аттрибуты:
Спасибо огромнейшее за пост. Выручили.
Товарищи, вы извращенцы :)) попробуйте
Просто супер!!!
Самый короткий и самый логичный вариант!
Это лучшее решение!
А если надо так же повесить load на несколько картинок, а после загрузки всех выполнить какое то действие, что посоветуете?
Не лучше ли таким способом? И меньше кода
$('.img').hide() .show(function() {}, function(){ $res = $(this).width(); });Клевый пример, и со всеми браузерами работает. Зачёт !!!
Спасибо большое! Никак не мог узнать реальную высоту!