Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Problem z ładowaniem strony

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

Problem z ładowaniem strony

Post 12.12.2017, 17:43:39

Hej, piszę w sprawie pewnego upierdliwego problemu:

Zrobiłem wstępne animowane logo na stronie www.icm24.eu . Ogólnie po godzinach walk jest ono zadowalająco responsywne i się nie rozjeżdza, więc mogę się pobawić szczegółowymi animacjami.

Niestety, jak to bywa, jedno rozwiązanie problemu stwarza kolejny problem. Teraz mam taki problem, że tuż przed tym jak załaduje się strona, części składowe tego animowanego loga są rozrzucone przez 0,1-1 sekundy po róznych częściach strony, zanim pojawią się tam, gdzie powinny.

samo logo jest w headerze i html wygląda tak:
<div class="headercustom">
<h2 class="h2top1">Bezpieczeństwo</h2>
<h2 class="h2top2">Wygoda</h2>
<h2 class="h2top3">Oszczędność</h2>
<div class="fulllogo">
<div class="outerlog"><img src="http://icm24.eu/wp-content/uploads/2017/11/logoradar.png" alt="monitoring" class="radar"></div>
<div class="innerlog"><img src="http://icm24.eu/wp-content/uploads/2017/12/logoinner.png" alt="wygoda" class="inlog" /></div>
<div class="middlelog"><img src="http://icm24.eu/wp-content/uploads/2017/12/logo-middle.png" alt="komfort" class="midlog" /></div>
</div>
</div>

div Fulllogo ma w tle statyczny element animowanego loga, a pozostałe divy mają w sobie poszczególne komponenty.

Problem jest taki, że przy łądowaniu strony w chrome, ten żółty obraz się pojawia na maksa po lewej, a pozostałe składowe gdzieś na dole. Dopiero po ok pół sekundy pojawiają się na środku, gdzie powinny być.

W mozilli nie ma takiego problemu. Co mogę zrobić, żeby to zlikwidować? Próbowałem dać jakieś animacje, zeby obraz zaczynał się od opacity 0, czy visibility: hidden i inne podobne mechanizmy, ale to nie dawało żadnego skutku. Domyslam sie, że może problem jest w konstrukcji całego headera i jego struktury divów. Albo w formie samego mechanizmu loadingu strony.

na ten moment jedyne co mi przychodzi do głowy, to zrobienie czegoś na ksztalt loading screenu. Przetestowałem jedną wtyczkę i wtedy ten rozjazd składowych img nie jest widoczny, ale loading screen traktuje jako ostatecznośc.
freaklaw
Posty: 1
Dołączył(a): 31.08.2016
Lokalizacja: Szamotuły

Re: Problem z ładowaniem strony

Post 13.12.2017, 07:23:08

Ustaw im początkowy css przezroczystość i w sam raz pojawią się po sekundzie ustawione jak należy.
Avatar użytkownikaLuna_s20
Posty: 98
Dołączył(a): 02.05.2014


Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 4 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 51032 zarejestrowanych użytkowników.
Najnowszy użytkownik: JK12


Nasi użytkownicy napisali:

  • 936623 wiadomości
  • w 246937 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)