如何用jquery制作页面的预加载效果？

Question

我想到的第一件事是创建一个容器，并在页面加载开始时让它充满屏幕，而元素仍在预加载掩码后面加载，例如

    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);

使用 SetInterval 设置它在几秒钟后消失（ ）函数（我知道它是假的，但我不知道如何判断元素已经下载了……）。

它就像 jquery 插件 queryloader 一样。但是，它在我的项目中效果不佳，所以我想自己写一个

上面描述的想法只有当页面中只有很少的元素时才有效，当元素变得越来越多时，效果就不再起作用了……我怎样才能让它在页面开始下载时显示？顺便说一句，我怎样才能判断所有元素都已经下载了？谢谢

Answer 1

查看文档的 jQuery .ready() 函数： http://api.jquery.com/ready/

从 jQuery API：指定
当 DOM 存在时执行的函数
满载。

示例如下：

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