Question

I have a div and an img that need centering on the window.I have extended jQuery functionality in order to do that using this function:

jQuery.fn.center = function () {
                this.css("position","absolute");
                this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) +$(window).scrollTop()) + "px");

                this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) +  $(window).scrollLeft()) + "px");

                return this;
            }

This function works perfectly but the only problem is that the image first loads on it’s default position and then is moved to the center.How can I make the image been seen directly on center on page load?

EDIT:Here is what I meant: http://www.foxteam.net/portfolio.php

Answer 1

I actually need to see the code that calls this function to help you out, but here’s a quick suggestion.

Render the img first with display:none; and chain your .fadeIn() function right after .center()
or make it synchronous using a callback.

This way, you are centering the image even before showing it.