Categories: JavaScript
Казалось бы, обычная задача – взять 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();
});
// для тех браузеров, которые подгрузку с кеша не считают загрузкой, пишем следующий код
var src = $img.attr('src');
$img.attr('src', '');
$img.attr('src', src);
This entry was posted
on Friday, February 5th, 2010 at 15:44 and is filed under JavaScript.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Оригинально)
Великий могучий 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()
А вы пробовали?..
Нет, отсюда и предположение)