Preloader с JQuery ИЛИ расширенным поведением загрузки страницы с помощью jQuery Progress Bar

Question

У нас есть индикатор выполнения jQuery. Есть ли способ, которым у нас может быть индикатор выполнения, отображающий загрузку HTML-страницы, на которой есть PHP, CSS и JavaScript и все в ней?

Как и в случае с предварительным загрузчиком, и когда страница полностью загружена и отрисована, отобразите ее.

Если не с индикатором выполнения, можем ли мы сделать предварительный загрузчик с помощью jQuery?

Answer 1

посмотри, что я нашел

jQuery Preloader и вот демо

Answer 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 loader GIF для размещения в качестве фонового изображения # preLoader

Answer 3

Однажды .. Я пытался создать это, но это было не красиво. Я перечислил все, что мне нужно иметь на странице, и увеличил индикатор выполнения один за другим по мере его загрузки. Это была очень длинная цепь. Вот пример того, что я сделал.

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

            });
        });
    });    
});