当前位置 : 主页 > 网页制作 > JQuery >

使用JQuery进行预加载器或使用jQuery Progress Bar进行高级页面加载行为

来源:互联网 收集:自由互联 发布时间:2021-06-15
我们有一个jQuery Progress Bar.有没有办法我们可以让进度条显示加载 HTML页面,其中包含 PHP,CSS JavaScript和所有内容? 像预加载器一样,当页面下载并完全渲染后再显示它. 如果没有进度条,我
我们有一个jQuery Progress Bar.有没有办法我们可以让进度条显示加载 HTML页面,其中包含 PHP,CSS& JavaScript和所有内容?

像预加载器一样,当页面下载并完全渲染后再显示它.

如果没有进度条,我们可以用jQuery制作预加载器吗?

曾经…我试图创造这个,但它不漂亮.我在页面上列出了我需要的所有内容,并在加载时逐个增加了进度条.这是一个非常长的链条.这是我做的一个例子.

$.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

            });
        });
    });    
});
网友评论