пропозиції роботи
konto usunięte
Temat: Lazy loading w JavaScript - pomysły ?
Ten dział jest na prawdę martwy :P No to zacznę nową dyskusję chociaż nie na nowy temat. Dopisałem sobie do biblioteczki mechanizm do lazy loading. Wersja pierwsza jest tutaj:https://github.com/dariuszp/dp/blob/master/js/dp.js (sekcja require)
Mechanizm działa w IE, Operze, FF, Chrome itp. Jak na razie wygląda na to że działa OK. Póki co mam 3 parametry. Ścieżkę do pliku, callback po załadowaniu (opcjonalnie) oraz "useWindowLoad".
Pierwsze 2 opcje są jasne, trzecia wymaga wyjaśnień.
Zauważyłem że nawet dodając pliki za pomocą JavaScript, wydłużam ładowanie się strony (a przynajmniej tak mi się wydaje). Rozwiązaniem jest wykorzystanie eventu "load".
Więc jeżeli "useWindowLoad" mamy ustawiony na false, pliki są dodawane w chwili wykonania skryptu. Jeżeli wykonamy go na dole strony, zwyczajnie zostaną załadowane i wydłużą całkowite ładowanie strony.
Jeżeli "useWindowLoad" ustawimy na true, wszystkie próby załadowania pliku js zostaną wykonane dopiero po załadowaniu się strony. Jeżeli ten parametr będzie miał wartość true w kodzie który wykonuje się po załadowaniu strony, zostanie on kompletnie zignorowany (na podstawie document.readystate).
Używanie tego jest dość proste, wystarczy wykonać taki kod:
dp.require.script('jQuery.js'); // lub
dp.require.script('jQuery.js', function(){ $('body').text('Hello world'); }); // lub dla "onload"
dp.require.script('jQuery.js', function(){ $('body').text('Hello world'); }, true);
przy czym skrypt obecnie nie pozwala na dołączanie tego samego pliku wielokrotnie.
O co chodzi ? Chętnie usłyszę propozycje, pomysły itp jak ów mechanizm ulepszyć. Obecnie mam w planach dodać jeden mechanizm extra. Mianowicie coś takiego:
dp.require.script([ 'jQuery.js', 'tree.jQuery.js', 'plugin.jQuery.js' ], function(){ $('body').text('Hello world'); });
czyli ładowanie zestawu plików, przy czym będą one ładowane w zadanej kolejności a callback odpali się tylko jeżeli wszystkie będą obecne. Myślę też o tym by dodać funkcje timeout. Ale prawdopodobnie żeby nie wydłużać listy parametrów zrobię to w ten sposób że przesunę onload i inne opcje do trzeciego parametru:
dp.require.script(
[ 'jQuery.js', 'tree.jQuery.js', 'plugin.jQuery.js' ],
function(){ $('body').text('Hello world'); },
{
onload: true,
timeout: function(){ console.error('Nie moge zaladowac plikow'); }
delay: 5000
}
);
