Казалось бы, обычная задача – взять height и width картинки, а нет – то один браузер конючит, то другой… решение следующие:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 | // берем все необходимые нам картинки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 =newImage();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?
Я так понимаю, этот блок удаляет только собственные аттрибуты:
Спасибо огромнейшее за пост. Выручили.
Товарищи, вы извращенцы :)) попробуйте
$img[0].naturalHeight;$img[0].naturalWidth;Просто супер!!!
Самый короткий и самый логичный вариант!
Это лучшее решение!
А если надо так же повесить load на несколько картинок, а после загрузки всех выполнить какое то действие, что посоветуете?
Не лучше ли таким способом? И меньше кода
<imgsrc="какая то картинка"class="img">$('.img').hide().show(function() {},function(){$res = $(this).width();});Клевый пример, и со всеми браузерами работает. Зачёт !!!
Спасибо большое! Никак не мог узнать реальную высоту!