Иногда я сталкиваюсь с проблемами, пытаясь получить размеры рассматриваемого HTML-элемента.
Я отслеживаю код JavaScript и вижу, что ширина и высота этого элемента возвращаются как 0.
Когда я делаю тот же кусок кода в консоли браузера, возвращаются правильные размеры.
Пример кода, демонстрирующий эту проблему, следующий:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Decorate image with button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function($){
// Decorate image, wrapped to link to movie with "Play" button
$("a > img").each(function(){
var img = $(this);
var a = img.parent();
var w = img.width();
var h = img.height();
a.html(" \
<table style='position: absolute;'> \
<tr style='background-color:transparent;'> \
<td style='width: 100%; background-color: transparent;'> \
<img src='http://30ttclan.extra.hu/e107_images/RTEmagicC_play_button.png.png' style='display: block; width: 25%; margin-left:auto; margin-right: auto;'></img> \
</td> \
</tr> \
</table>");
a.append(img);
// Make height of table equals to height of image
a.find("> table").width( w );
a.find("> table").height( h );
});
});
</script>
</head>
<body>
<a href="http://movies.apple.com/media/us/mac/ilife/iphoto/2010/features/apple-ilife-iphoto-features_whats_new-us-20100727_r848-9cie.mov">
<img src="http://kelsocartography.com/blog/wp-content/uploads/2009/01/iphoto09_map.png">
</a>
</body>
</html>
Этот код занимаетизображение, обернутое для привязки и украшающее его кнопкой «Воспроизведение», которое должно быть центрировано над ним.
Ячейка таблицы используется для центрирования.
В Firefox это работает хорошо, но нев Safari 5.
Когда мы проследим код, где переменные "w" и "h" получают ширину и высоту, мы увидим, что они имеют нули.
Когда мы говорим из браузераconsole
$("a > img").width()
мы получим правильные размеры изображения.
Я думаю, я что-то упустил ...
Я думаю, я должен поймать "рендеринг завершен«Подобные события ... Но, насколько я знаю, они не представлены в DOM.
Как я могу узнать, когда HTML-элемент отображается и отображается на 100%, что я имею дело с правильными размерами?