使用JavaScript和jQuery计算尺寸 [英] Sizes calculation with JavaScript and jQuery
问题描述
有时我遇到问题，试图获取有问题的HTML元素的大小.
Sometimes i'm facing problems, trying to get sizes of an HTML element in question.
我正在跟踪JavaScript代码，并且看到此元素的宽度和高度返回为0.
I'm tracing JavaScript code and see, that width and height of this element are returned as 0.
当我在浏览器控制台中执行同一段代码时，将返回正确的大小.
When i do the same piece of code in browser's console, correct sizes are returned.
下面的示例代码演示了此问题:
Example code, that demonstrates this problem is following:
<!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>
此代码获取一个图片，将其包裹起来以固定并用播放"按钮装饰，该图片必须居中.
This code takes an image, wrapped to anchor and decorates it with "Play" button, that must be centered over it.
表格单元格用于居中.
在Firefox中，它可以很好地工作，但在Safari 5中却不能.
In Firefox it works well, but does't in Safari 5.
当我们跟踪代码时，"w"和"h"变量的宽度和高度都将变为零.
When we trace the code, where "w" and "h" variables getting width and height, we will see, that they have zeros.
当我们从浏览器控制台说
When we say from browser's console
$("a > img").width()
我们将获得正确尺寸的图像.
we will get correct sizes of image.
我认为，我缺少了一些东西...
I think, i'm missing something ...
我认为，我必须捕捉类似呈现完整"的事件……但是，据我所知，它们没有在DOM中呈现.
I think, i must catch "rendering complete"-like events ... But, as far, as i know, they are not presented in DOM.
我如何知道在呈现和显示HTML元素时100％确保我正在处理正确的尺寸?
How can i get to know, when the HTML element is rendered and displayed to be 100 % sure, that i'm dealing with correct sizes ?
推荐答案
问题已解决.
如问题中所述如何确保图像是在JQuery插件中加载的?
Chrome等Webkit浏览器通常会并行加载图片，因此返回的图片大小通常为0.
webkit browsers like Chrome often return 0 size for images because they're loaded in parallel.
所有，我需要做的就是对图像使用加载"事件.
All, what i need to do, is to use "load" event for image.
$("a > img").load(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 );
});
现在，我的尺寸正确了.
Now, i'm getting correct sizes.
这篇关于使用JavaScript和jQuery计算尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
