Mam często zadawane pytanie, mam stronę internetową wykonaną za pomocą HTML, CSS i JQuery. Kiedy strona zaczyna się ładować, najpierw ładuje html i wyświetla div na sekundę, które mają być ukryte przez css i jquery. Ale po chwili wygląda idealnie. Ale ta pierwsza sekunda wygląda okropnie. Jak mogę tego uniknąć?css ładuje się późno, więc HTML wygląda dziwnie na sekundę
Nie miałem takiego doświadczenia, ale myślę, że tutaj powinna pomóc procedura ładowania skryptów. W zależności od tego, co ma robić strona (nieznana mi), wolę, żebyś próbował ładować w ten sposób.
Wyświetlacz div za pomocą CSS
<div style="display: none;">Hidden by default</div>
Załaduj pliki JQuery przed zamknięciem tagu ciała.
Po pełnym załadowaniu strony może wtedy dobrze działać.
Brudny rozwiązaniem jest inline css:
<div style="display: none;">This will be hidden</div>
Lepszym rozwiązaniem byłoby zbudowanie tych elementów na żądanie z JavaScript.
cóż, mój projekt jest duży, więc nie mogę tego zrobić. –
którego nie można zrobić? – erenon
Nie mogę używać wbudowanego css –
$(this).hide(); lub $(this).addClass('.hidden'); jest zawsze wolniejszy niż .class { display:none; }
jQuery musi czekać na DOM załadować. CSS nie. Ustaw CSS, aby ukrył elementy, które chcesz ukryć podczas ładowania, a następnie użyj jQuery, aby wyświetlić te elementy.
Jeśli chcesz, aby twój css renderował się szybciej, najlepiej przenieść ukryte instrukcje css do ich własnego małego pliku, lub jeszcze lepiej dodać ukryte css do tagów <style> na stronie. Oznacza to, że są one renderowane niemal natychmiast.
W odniesieniu do jQuery — jak Scott wspomniał o — najszybszym, na jaki można mieć nadzieję, jest odpalenie na dom ready. Jeśli czekasz na obciążenie okna, będzie to jeszcze wolniej. Dzięki czystemu javascriptowi możesz umieścić znaczniki script po elementach, które muszą być ukryte na stronie. Następnie możesz skierować je bezpośrednio za pomocą doument.getElementById i ustawić ich display na none, bez konieczności oczekiwania na gotowość strony.
Czy twój plik CSS jest powiązany w HEAD dokumentu? –
tak, jest on połączony w nagłówku –
Czy ustawiasz klasy przez jquery, a następnie ukrywasz klasy lub czy w ogóle używasz jquery do ukrycia? Zwykle szybciej jest ustawić CSS na "display: none", a następnie użyć jquery do pokazania. To nie musi być wbudowany CSS, ale w CSS, a nie jQuery jest szybszy. – Scott