How can I make a page's pre-load effect with jquery?

The first thing I think about is make a container, and let it full of the screen at the begining of the page loadding,While the element still are loading behind the pre-load mask ,like

    var window_width = $(window).width();
    var window_height = $(window).height();

    $('.pre-modal-window').each(function () {

        var modal_height = parseInt($('.pre-modal-window').css("height"));
        var modal_width = parseInt($('.pre-modal-window').css("width"));

        var top = (window_height - modal_height) / 2;
        var left = (window_width - modal_width) / 2;

        $(this).css({ 'top': top, 'left': left });

    })

        //set display to block and opacity to 0 so we can use fadeTo
        $('#pre-mask').css({ 'display': 'block', opacity: 0 }).fadeTo(50, 1.0);

        //show the modal window
        $('.pre-modal-window').fadeIn(500);

Setting it disappeared after few second by using SetInterval() function(well I konw i开发者_JAVA技巧t is fake,but I don't konw how to judge the element have downloaded already……) .

It just like the jquery plugin queryloader.However, it does't work well in my project.So I want write one by myself

The thought described above only work when page just have few elements in my page,when the elements become more and more,the effect does't work again ……How can I let it show when the page begin download?BTW,how can I judge all the elements have downloaded already?Thank you

---

Have a look at jQuery's .ready() function for the document: http://api.jquery.com/ready/

From the jQuery API: Specify a function to execute when the DOM is fully loaded.

An example would be as follows:

<script type="text/javascript">
$(document).ready(function() {
  // hide the loading mask here.
});
</script>