Witam,


zacząłem korzystać z biblioteki Ext js i zrobiłem sobie stronkę która zawiera kilka elementów ale długo się łąduje, dlatego chcę dodać do tego gifa onload zanim pokaże się zawartość

Zrobiłem coś takiego :

[JAVASCRIPT] pobierz, plaintext 
Ext.onReady(function(){
    window.onload = function(){ 
        var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
        myMask.show();
        loginWindow.show(this);
    }
});
[JAVASCRIPT] pobierz, plaintext 

gdzie loginWindow.show(this); to cała zawartość strony
myMask to gif loading

No i teraz jak wywołuję stronę to dopiero po załadowaniu wyświtla się i okno, i loading gif, a wiadomo że najpierw powinien być gif a gdy się całość załaduje to gif znika i pojawia się zawartość....wiecie jak to przerobić ?

window.onload jest przecież wyzwalane, kiedy wszystko zostanie załadowane. Nie używaj window.onload, tylko wklej bezpośrednio obrazek do drzewa DOM albo wręcz ustaw warstwę przysłaniającą całość, jeśli to jest aplikacja w całości uzależniona od JS.

Dopiero wtedy, przez window.onload chowaj tego gifa.

Szczerze mówiąc nie mam pojęcia jak to zrobić.....przecież nic mi się nie pokże zanim DOM nie jest gotowy, tzn, można prosić o jakiś przykład czy coś, bo nie moge znaleźć nic w googlach na ten tamat a juz szperam i szperam....

Ah, teraz rozumiem


Ja to chciałem zrobić jakims cudem za pomocą biblioteki Ext js, bo robimy projekt za pomocą tej bibliteki i lepiej byłoby jeśli zrobiłbym to za jej pomocą, ktoś może się orientuje jak to zrobić ?

Chodzi o to że widoki w ZF będązupełnie puste i będą tylko zawierały ścieżkę do pliku js który będzie wyświetlał całą zawartość, więc zależy mi żeby zrobić to jakoś w Ext js, myslicie że da rade ?

--------------------------------------

to jest zrobione tak :

plik widoku zend frameworka .xhtml :

[HTML] pobierz, plaintext 
<?php echo $this->headScript()->setFile($this->baseUrl().'/scripts/ext/adapter/ext/ext-base.js') ?>
<?php echo $this->headScript()->setFile($this->baseUrl().'/scripts/ext/ext-all-debug.js') ?>
<script>
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
</script>
<?php echo $this->headScript()->setFile($this->baseUrl().'/scripts/test.js') ?>
[HTML] pobierz, plaintext 

No i jak widać ostatnia linijka to załączony skrypt javascript ext którego wywołanie wygląda tak :

[JAVASCRIPT] pobierz, plaintext 
Ext.onReady(function(){ 
    vp.render();
    myMask.hide();
});
[JAVASCRIPT] pobierz, plaintext 

Gdzie vp to jest tzw Viewport zawierający całość strony wygenerowanej za pomocą js

więc vp.render() to wygenerowanie całości strony\
no i dalej próbuje schować obrazek.

No ale działanie wogóle nie odnosi skutku,

Obrazek pokazuje się dopiero po załadowaniu całości strony i nawet się nie chowa......

Jak chcesz zrobić to za pomocą ExtJS, skoro nie jest ta biblioteka jeszcze wczytana? Funkcje rdzenia JS masz w przeglądarce, nie trzeba ich z zewnątrz ładować w przeciwieństwie do ExtJS (tak samo jak i każdego innego frameworka).

Musisz wstawić tego loadera ręcznie, bo jeśli obarczysz tym ExtJS, to obrazek w ogóle się nie pojawi.