Why does the page need to be refreshed to be able to calculate elements dimensions
<p>I'm having an issue with a script that I've made recently. The idea is for an image to follow the mouse, but not to go outside of the screen.
<a href="http://nemanjamilosavljevic.com/javascript/gallery_view" rel="nofollow">http://nemanjamilosavljevic.com/javascript/gallery_view</a></p>

<p>When you first load the page, it does not calculate the dimensions of the elements, but when you refresh the page then they are calculated. 
The elements are not shown on the page right away, since the content that needs to be calculated is a popup. I have tried displaying them right away, but it still didn't do the trick.</p>

<p>Here is the code I'm using:</p>

<pre><code>.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;}
</code></pre>

<p>Markup:</p>

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

<p>Includes:</p>

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

<p>Gallery popup script:</p>

<pre><code>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('&lt;span class="popup-image-cnt"&gt;&lt;img src="' + originalSrc + '" alt="" /&gt;&lt;/span&gt;');

            // 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 &gt; 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 &gt; 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');
            });

        });        
    });    
}
</code></pre>
