CSS działa po renderowaniu strony

Question

Występuje problem, gdy moja strona ładuje się, a po ułamku sekundy następuje efekt CSS lub stylizacja.

Główny problem widzę jest z kartami JQuery że używam http://docs.jquery.com/UI/Tabs#source

Gdy strona renderuje, występy pokazują, jedna pod drugą na chwilę jak ta:

 
One 
Two 
Three 

a następnie renderować poprawnie jako tabulatory. Czy istnieje szybka i łatwa metoda rozwiązania tego problemu. Dzięki

Answer 1

To nie jest stylizacja; jest to biblioteka javascript jQuery UI, która dołącza niezbędny html do twojej strony, dzięki czemu wszystkie karty mogą wyglądać bardzo ładnie.

Masz kilka opcji. Po pierwsze, możesz ukryć swoje karty i wyświetlić je, gdy jQuery UI zakończy swoją magię. Po drugie możesz ustawić swoje karty tak, aby wyglądały wystarczająco blisko gotowych wydruków, aby zmiana nie była tak zauważalna. Po trzecie, możesz usunąć interfejs użytkownika jQuery i stylizować karty tylko za pomocą CSS. Podejrzewam, że wszystkie prawidłowe podejścia.

Mam nadzieję, że to pomoże!

EDIT:

Dla pierwszej opcji, powiedzmy, że jest to div zawierający zakładki:

<div id="tabs"> 
    ...stuff... 
</div> 

W arkuszu stylów, ukryć #tabs:

#tabs { 
    display:none; 
} 

Następnie zmodyfikuj swoje wywołanie jQuery UI tak:

var t = $("#tabs"); 

t.tabs({ 
    create:function(){ 
     t.show(); 
    } 
}); 

Answer 2

Czy CSS jest stosowany przez JavaScript? W takim przypadku możesz dodać statyczny CSS, który zapewni, że elementy będą co najmniej pokazywane w układzie poziomym przed uruchomieniem javascript, dodając trochę statycznego CSS.

Jeśli jest tak, że przeglądarka po prostu zdecyduje się zastosować CSS po renderowaniu bez niego, niewiele można zrobić. Możliwe jednak, że CSS ładuje się powoli (jeśli jest to plik zewnętrzny), w tym przypadku możesz dodać najważniejszy styl do sekcji CSS bezpośrednio w kodzie HTML.

Answer 3

Przeglądarki zazwyczaj ładują pliki w takiej postaci, w jakiej pojawiają się w kodzie HTML. Pamiętaj, aby najpierw umieścić odniesienie do pliku CSS, aby ładował się tak szybko, jak to możliwe.

Jeśli CSS jest stosowany za pomocą Javascript, nie można go załadować szybciej. Plik Javascript musi zostać załadowany, zanim będzie można go użyć.

Poza tym, nie sądzę, że istnieje sposób kontrolowania działania renderowania przeglądarki. Odpowiedź

Answer 4

weirdlover niemal pracował dla mnie (przy użyciu jQuery 1.5.2), ale musiałem zahaczyć zdarzenie create:

var t = $("#tabs"); 

t.tabs({ 
    create:function(){ 
     t.show(); 
    } 
}); 

Dzięki!