javascript - 要素の寸法を計算できるようにページを更新する必要があるのはなぜですか

Question

最近作成したスクリプトに問題があります。アイデアは、画像がマウスに追従しますが、画面の外には出ないようにすることです。 http://nemanjamilosavljevic.com/javascript/gallery_view

ページを最初にロードしたときは、要素のサイズは計算されませんが、ページを更新すると計算されます。計算する必要があるコンテンツはポップアップであるため、要素はすぐにはページに表示されません。すぐに表示しようとしましたが、それでもうまくいきませんでした。

私が使用しているコードは次のとおりです。

.popup-image-cnt {
    display:none; 
    position:fixed; 
    z-index:10;
    border:2px solid #fff;
    box-shadow:0 0 15px rgba(0,0,0,.7);
}
.popup-image-cnt img {display:block;}

マークアップ:

<ul id="fnc-preview-this-design">
    <li><a href="#" rel="gallery/1-3.jpg"><img src="gallery/1-1.jpg" /></a></li>
    <li><a href="#" rel="gallery/2-3.jpg"><img src="gallery/2-1.jpg" /></a></li>
    <li><a href="#" rel="gallery/3-3.jpg"><img src="gallery/3-1.jpg" /></a></li>
</ul>

内容:

<script src="jquery/jquery-1.8.3.min.js"></script>
<script src="jquery/jquery-gallery-view-1.0.0.js"></script>
<script type="text/javascript">   
    $(document).ready(function() {
        gallery_popup({
            actionElement: '#fnc-preview-this-design a'
    }); 
});
</script>

ギャラリー ポップアップ スクリプト:

function gallery_popup (elementsObj){
    $(window).load(function(){
        // Define a screen's bottom position
        var bottomPosition = $(window).height() + $(document).scrollTop();

        // Define a screen's right position
        var sidePosition = $(window).width();

        // Generate popup images for every item that is needed
        $(elementsObj.actionElement).each(function (i) {
            // Append
            var image     = $(this),
            originalSrc = image.attr('rel');

            $(this).append('<span class="popup-image-cnt"><img src="' + originalSrc + '" alt="" /></span>');

            // Calculate images width and height after it is added and loaded
            var imgH = $(this).children('.popup-image-cnt').height();
            var imgW = $(this).children('.popup-image-cnt').width();

            $(this).bind('mousemove', function(e){
                // Define a position where the images bottom side is
                var mouseYPosLimiter = Math.round(parseFloat(e.pageY) + parseFloat(imgH));

                // Define a position where the images right side is
                var mouseXPosLimiter = Math.round(parseFloat(e.pageX) + parseFloat(imgW));

                // See if it fits vertically, and if it doesn't, stick it to the bottom
                if (mouseYPosLimiter > bottomPosition) {
                    var topPos = bottomPosition - imgH - 4
                } else {
                    var topPos = e.pageY + 20
                }

                // See if it fits horizontally, and if it doesn't, stick it to the right
                if (mouseXPosLimiter > sidePosition) {
                    var sidePos = sidePosition - imgW - 4
                } else {
                    var sidePos = e.pageX + 10
                }

                // Move the popup along with the mouse
                $('.popup-image-cnt').offset({
                   left:  sidePos,
                   top:   topPos
                });

            });

            // mouse action
            $(this).mouseenter(function() {
                // Show the popup
                $(this).children('.popup-image-cnt').fadeIn('fast');
            });

            $(this).mouseleave(function() {
                // Hide the popup
                $(this).children('.popup-image-cnt').fadeOut('fast');
            });

        });        
    });    
}