基于JavaScript和jQuery的尺寸计算_Javascript_Jquery_Html Rendering

基于JavaScript和jQuery的尺寸计算

javascript jquery

基于JavaScript和jQuery的尺寸计算,javascript,jquery,html-rendering,Javascript,Jquery,Html Rendering,有时我会遇到一些问题，试图得到一个HTML元素的大小我正在跟踪JavaScript代码，看到这个元素的宽度和高度返回为0 当我在浏览器控制台中执行相同的代码时，会返回正确的大小演示此问题的示例代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8" /> <title>Decorate

有时我会遇到一些问题，试图得到一个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>

我们将得到正确大小的图像

我想，我错过了一些东西

我想，我必须抓住“渲染完成”这样的事件。。。但是，据我所知，它们并没有在DOM中显示

当HTML元素被呈现并显示为100%确定时，我如何才能知道我处理的是正确的大小？

问题已经解决

如前所述

像Chrome这样的webkit浏览器通常为图像返回0大小，因为它们是并行加载的

我需要做的就是对图像使用“加载”事件

$("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 );
});

$（“a>img”）.load（函数（）{
var img=$（本）；
var a=img.parent（）；
var w=img.width（）；
var h=img.高度（）；
a、 html（“\
\
\
\
\
\
\
");
a、 附加（img）；
//使桌子的高度等于图像的高度
a、 查找（“>表格”）。宽度（w）；
a、 查找（“>表格”）。高度（h）；
});

现在，我得到了正确的尺寸。

看起来，当您请求尺寸时，图像已完全加载。因此，您必须使用一种机制来确保在查询维度之前加载所有图像。看看：太棒了！它起作用了！非常感谢，苏雷什·库马尔！：）

$("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 );
});