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>

如何使用jquery创建页面的预加载效果？

1 个答案: