Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
[CSS]Brak płynnego przejścia tła przy wskazaniu myszka
#1
Witam,

w menu, w każdym div-ie mam ustawione inne tło.
Lecz gdy najade myszką na jeden z tych div-ów (div:hover) drugie tło wczytuje się strasznie wolno (musze czekać ok 8s aż pobierze sie te tło) i nie widać ani pierwszego tła ani drugiego więc jest puste miejsce.

Następnie gdy tło "pobierze sie" wszystko działa ok.(Oczywiście jak wyczyszcze cache przeglądarki problem pojawia się na nowo)
Probowałem także użyć atrybutu dla obrazka - onmouseover, lecz efekt jest taki sam jak w css - div:hover.

Zatem pytanie. Czy jest jakiś sposób żeby "wymusić" pobranie tego drugiego tła do pamięci przeglądarki zanim użytkownik najedzie myszką na element div?

Namiary na strone: neohdesign.co.cc
Zwróćcie uwage na menu.

Dodam że tła które tak wolno się wczytują zajmują od 970 bajtów do 2.2 kb.
Z jednej strony jest to troche, lecz na mojej innej stronie gdzie tło zajmuje ok 600b wszystko jest ok O.o
Namiary na drugą strone: myskateboarding.co.cc

Z góry dzięki za odpowiedzi.
Dodam jeszcze że przerobiłem wszystkie drugie tła na format gif co daje wielkości plików z rzędu 169 bajtów do 403 bajtów.
Tła nawet nie chcą sie wczytać szybciej D:
Nawet wczytują się dłużej a do tego jeszcze g******a jakość która daje gif w porównaniu do png.
efekt: neohdesign.co.cc/index2.html
Odpowiedz
#2
Można to rozwiązać w sposób, że obydwa stany przycisku zapisujesz w jednym pliku, jako przykład znany portal allegro:

http://static.allegrostatic.pl/site_images/1/0/layout/menu-sprite.png

dalej w pierwszym stanie i drugim dajesz odpowiednie wartości background-position: 0px 0px; - pamiętaj też menu musi mieć stałą wartość height.

A długie wczytywanie jest też po winie samego serwera.
Odpowiedz
#3
Dzięki za odpowiedź ;P
Wcześniej znalałem też to http://riddle.jogger.pl/2005/08/25/efekt-rollover-w-css/ dokładanie o to mi chodziło dzięki ;D
Odpowiedz
#4
Ja to rozwiązałem w nieco inny sposób. Załadowałem obrazki w tle w trakcie ładowania samej strony przy użyciu JS. Tutaj jest podobny przykład:
http://www.staff.amu.edu.pl/~psi/informatyka/javascript/preload.html
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  Brak obsługi JS w IE 8.0 mariusz__vip 3 4,294 21-02-2014, 22:26
Ostatni post: msx83
  Problem przy pomniejszaniu/powiększaniu strony pelirroja 7 4,896 10-12-2012, 23:10
Ostatni post: Kartofelek
  Pomoc przy tłach erfix 12 5,466 09-09-2012, 23:34
Ostatni post: erfix
  [JS] Callback przy dynamicznym ładowaniu bandzgla 0 1,496 08-03-2012, 21:12
Ostatni post: bandzgla
  Brak polskich znaków na stronie.. Co zrobić?! Webber 13 8,924 02-03-2012, 16:49
Ostatni post: Kartofelek

Skocz do:


Użytkownicy przeglądający ten wątek:
Sponsorzy i przyjaciele
SeoHost.pl