Sizes calculation with JavaScript and jQuery_问答_开发者

Sizes calculation with JavaScript and jQuery

开发者 https://www.devze.com 2023-01-21 02:29 出处：网络

Sometimes i\'m facing problems, trying to get sizes of an HTML element in question. I\'m tracing JavaScript code and see, that width and height of this element are returned as 0.

Sometimes i'm facing problems, trying to get sizes of an HTML element in question.

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.

Table cell is used for centering.

开发者_StackOverflowIn Firefox it works well, but does't in Safari 5.

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 ...

I think, i must catch "rendering complete"-like events ... But, as far, as i know, they are not presented in DOM.

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 ?

The problem is solved.

As mentioned in question How to ensure images are loaded inside a JQuery plugin?

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.