Jak wyświetlić pasek postępu na stronie internetowej, dopóki strona internetowa nie zostanie w pełni załadowana?

Question

Chciałbym wyświetlić pasek postępu/załadowanie wyskakującego okienka na stronie internetowej, dopóki strona nie zostanie w pełni załadowana.

Moja strona internetowa jest ciężka, ponieważ zawiera edytor HTML, który jest edytorem HTML opartym na jQuery, który zajmuje dużo czasu, aby całkowicie załadować. Podczas ładowania chcę wyświetlić pasek postępu na mojej stronie, który zostanie usunięty zaraz po zakończeniu ładowania całej strony.

Answer 1

Nie wiem, jak wyświetlić pasek postępu.
Ale pokazanie okna ładowania jest łatwe przy użyciu jQuery BlockUI Plugin
Wystarczy odwołać się do wtyczki jQuery i BlockUi wewnątrz znacznika head.

Zrób coś takiego.

$(document).ready(function() { 
    // block page 
    $.blockUI(); 
    //load your editor here 
    //after load complete unblock page 
    $.unblockUI(); 
}); 

Jeszcze lepiej, jeśli używasz coś jak CKEditor można odblokować stronę po obciążeniu całkowitym zwrotnego z CKEditor.

Oto mały przykład ze stroną blokowaną przez 10 sekund. Możesz ustawić to samo na swoim oddzwonieniu. (Example Here)

Answer 2

Jeśli lista zasobów (pliki JavaScript) jest dostępna, można zrobić coś takiego:

var loadedResources = 0; 
var deferreds = []; 
var resList = [ 'res1.js', 'res2.js' ]; 

$.each(resList, function(index, res) { 
    var load = $.ajax({ 
     type: "GET", 
     url: res, 
     dataType: "script" 
    }).then(function() { 
     loadedResources += 1; 

     //Update progress bar here 
     //Use variable 'loadedResources' and 'resList.length' 
     //to calculate the width of the progess bar 
    }); 
    deferreds.push(load); 
}); 

$.when.apply(this, deferreds).then(function() { 
    //Hide or remove progress bar here because all resources were loaded 
}); 

Za każdym razem, kiedy zasób został załadowany zaktualizować pasek postępu. Po załadowaniu wszystkich zasobów możesz ukryć pasek postępu.

$.when.apply() służy do pobrania tablicy odroczonej do jednego centralnego odroczonego. Jeśli to centralne opóźnienie zostanie zakończone, wszystkie odroczenia "na" zostaną zakończone.

Oczywiście można również dodawać obrazy itp. Do listy zasobów, ale należy zmodyfikować the way of loading dla konkretnego zasobu.

W razie potrzeby here można znaleźć więcej informacji o Odroczonych obiektach.

Edycja: Oczywiście nie można zobaczyć rzeczywistego procesu, jeśli tylko jeden zasób znajduje się w tablicy zasobów.