не может получить истинную высоту/ширину объекта в хроме
У меня есть вопрос, если я установил высоту изображения в CSS и пытаюсь получить высоту/ширину, я получаю различные результаты в различных браузерах. Существует ли способ получить тот же размер во всех браузерах?
Можно найти живой пример здесь <-Удаленным
и понятие похоже на это:
CSS:
img{
height:100px;
}
Script:
$(document).ready(function(){
$("#text").append($("#img_0").attr("height"));
$("#text").append($("#img_0").attr("width"));
});
Выходной Firefox: высота img: 100 img ширин: 150
Вывод Chrome: высота img: 100 img ширин: 0
Вывод Chrome: высота img: 100 img ширин: 93?
я попробовал это от StackOverflow: stackoverflow.com/questions/1873419/jquery-get-height-width
но все еще получите тот же результат
Кто-либо знает хорошее решение?
4 ответа
Изображения не загружаются в document.ready , вам нужно использовать событие window.load чтобы убедиться, что они присутствуют, вот так:
$(window).load(function(){
$("#text").append($("#img_0").height());
$("#text").append($("#img_0").width());
});
Вот краткое описание различий , важная часть заключается в том, что загружаются изображения.
Похоже, что это состояние гонки, по крайней мере, так было у меня при использовании Chrome. Изображение не закончило загрузку в то время, когда вы получаете размеры. Я настроил все на срабатывание после тайм-аута в 200 мс, и отображаются реальные ширина/высота.
$(document).ready(function() {
setTimeout("getImageDimensions()", 200);
});
function getImageDimensions() {
var pic_real_width;
var pic_real_height;
$("#topContent img").each(function() {
var $this = $(this);
$this.removeAttr("width");
$this.removeAttr("height");
$this.css({ width: 'auto', height: 'auto' });
pic_real_width = $this.width();
pic_real_height = $this.height();
$this.css({ width: '', height: '100px' });
});
$("#text").append(" height: " + pic_real_height/*$("#top_img_0").attr("height")*/ + "<br/>");
$("#text").append(" width: " + pic_real_width/*$("#top_img_0").attr("width")*/ + "<br/>");
}
Проверено и работает в Chrome, IE и Firefox. Все отображают 2008 x 3008.
Ответ Ника Крейвера на использование $ (window) .load () верен, но изображения также имеют метод load (), который обеспечивает более тонкую детализацию, особенно если возможно несколько изображений для загрузки.
$(document).ready(function(){
$("#top_img_0").load (function (){
$("#text").append( "height: " + $("#top_img_0").attr("height")+"<br/>" );
$("#text").append( "width: " + $("#top_img_0").attr("width")+"<br/>" );
});
});
Заменить
$this.css({width: '', height: ''});
на
$this.css({width: 'auto', height: 'auto'});
Opera 10.10, высота / ширина 2008 x 3008