3

我们有一个 jQuery 进度条。有没有办法让进度条显示包含 PHP、CSS 和 JavaScript 等所有内容的 HTML 页面的加载？

就像预加载器一样，当页面被下载并完全呈现时，然后显示它。

如果没有进度条，我们可以用 jQuery 做一个预加载器吗？

4

3 回答 3

3

看我找到了什么

jQuery Preloader，这里是演示

于 2010-08-30T02:03:57.607 回答
2

曾经..我试图创建这个，但它并不漂亮。我在页面上列出了我需要拥有的所有东西，并在加载进度条时一一增加。这是非常长的链条。这是我所做的一个示例。

$.getScript('js/lib/ui.js',function() { //Load the Jquery UI
    //Call back function after the loading is complete

    $("#progressinfo").html("Loading Widgets ..."); //Give the information 

    $.getScript('js/lib/widget.js',function() { // Load the jquery ui Widget
    //Call back function after the loading is complete

        $("#progressinfo").html("Loading Widgets: Progress Bar ..."); // Inform

        $.getScript('js/lib/widgets/progressbar.js',function() { // Finally load the Jquery UI progressbar
            //Call back function after the loading is complete

            $("#progressbar").progressbar({ value: 5 }); // change the value of the UI informing the total amount of loadding completion                                             
            $("#progressinfo").html("Loading Widgets: some script ..."); //Inform of another script

            $.getScript('somescript.js',function() { // Load another script
            //Call back function after the loading is complete

               $("#progressbar").progressbar({ value: 6 }); // change the value of the UI informing the total amount of loadding

            });
        });
    });    
});
于 2010-08-29T15:31:46.737 回答
2

最简单但仍然性感的方式：

隐藏所有内容，直到 DOM 准备好，除了位于页面中心的加载图标。然后当内容加载时，移除加载图标：

像这样的东西：

                jQuery(function( $ ){
                        function preLoad() {
                            $("#content").addClass("hidden");
                        }

                        function loaded() {
                            $("#content").removeClass("hidden");
                            $('div#preLoader').css({display:'none'}).remove();
                        }

                        preLoad();
                        window.onload=loaded;
                });

编辑：您需要一个ajax 加载器gif 作为 #preLoader 的背景图像

于 2010-08-30T06:15:07.043 回答