Получите реальную ширину и высоту изображения с JavaScript? (в Safari/Chrome)
7 ответов
Браузеры WebKit устанавливают высоту и свойство width после того, как изображение будет загружено. Вместо того, чтобы использовать тайм-ауты, я рекомендовал бы использовать onload событие изображения. Вот быстрый пример:
var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
.attr("src", $(img).attr("src"))
.load(function() {
pic_real_width = this.width; // Note: $(this).width() will not
pic_real_height = this.height; // work for in memory images.
});
Для предотвращения любого CSS эффектов мог бы иметь на размерах изображения, код выше делает в копии памяти изображения. Это - очень умное решение, предложенное FDisk.
можно также использовать naturalHeight и naturalWidth атрибуты HTML5.
Корневая проблема состоит в том, что браузеры WebKit (Safari и Chrome) загружают JavaScript и информацию о CSS параллельно. Таким образом JavaScript может выполниться, прежде чем эффекты моделирования CSS были вычислены, дав неправильный ответ. В jQuery я нашел, что решение состоит в том, чтобы ожидать до document.readyState == 'завершенный', .e.g.,
jQuery(document).ready(function(){
if (jQuery.browser.safari && document.readyState != "complete"){
//console.info('ready...');
setTimeout( arguments.callee, 100 );
return;
}
... (rest of function)
До ширины и высоты идет... в зависимости от того, что Вы делаете, можно хотеть offsetWidth и offsetHeight, которые включают вещи как границы и дополнение.
это работает на меня (сафари 3.2) путем увольнения из window.onload событие:
$(window).load(function() {
var pic = $('img');
pic.removeAttr("width");
pic.removeAttr("height");
alert( pic.width() );
alert( pic.height() );
});
Как говорит Люк Смит, загрузка изображений вызывает беспорядок . Это не во всех браузерах. Этот факт причинил мне большую боль. Кэшированное изображение вообще не запускает событие в некоторых браузерах, поэтому те, кто сказал, что «загрузка изображения лучше, чем setTimeout», ошибаются.
Решение Люка Смита здесь.
И есть интересное обсуждение того, как с этим беспорядком можно справиться в jQuery 1.4.
Я обнаружил, что довольно надежно установить ширину в 0, а затем подождать, пока свойство "complete" станет истинным, а свойство ширины - приходят больше нуля. Вам также следует следить за ошибками.
function getOriginalWidthOfImg(img_element) {
var t = new Image();
t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
return t.width;
}
Вам не нужно удалять стиль из атрибутов image или image dimensions. Просто создайте элемент с помощью javascript и получите ширину созданного объекта.
$("#myImg").one("load",function(){
//do something, like getting image width/height
}).each(function(){
if(this.complete) $(this).trigger("load");
});
Из комментария Криса: http://api.jquery.com/load-event/
Для функций, в которых вы не хотите изменять исходное размещение или изображение.
$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);