Background Attachment

Question

Sytuacja wygląda następująco... na ten moment na stronie są 3divy.

DIV1 (100vh, img w tle, bg-attachment:fixed)

DIV2 (50vh, białe tło)

DIV3 (100vh, img w tle ale inny niż w DIV1, bg-attachment:fixed)

 

Problem polega na tym... że gdy przy scrollowaniu strony po jej pierwszym załadowaniu,gdy dochodzimy do końca DIV2 to strona na chwilę "staje w miejscu", tj najprawdopodobniej ładuje nowy obrazek w tle DIV3.

Kiedy zmieniłem obrazki na te same, problem zniknął.

Czy jest jakiś sposób aby załadować zdjęcie z DIV3 od razu po wejściu na stronę? Lub jaka może być inna przyczyna takiego obrotu spraw?

Comments

Wrzuć tu cały kod (w odpowiednie znaczniki) i się zobaczy :)

---

Strona dostępna jest tutaj.

Oczywiście nie znajduje się tam nic innego ponad ukazanie tego problemu.

Answer 1

Przyczyna jest bardzo prosta.

Pierwszy obrazek ma prawie, a drugi dokładnie 6000 na 4000 pikseli.

Większość komputerów się lekko ksztusi przy załadowaniu tak dużego obrazka.

Poza tym jest to duży błąd jeżeli chodzi o optymalizację, jako, że i tak wszystkie strony maksymalnie tworzy się do rozdzielczości 1920 na 1080 pikseli.

Po prostu zmniejsz zdjęcia do maksymalnie 1920 pikseli szerokość i powinno być ok.

Polecam też nieco kompresować te zdjęcia, gdyż dla takiego 1920 x 1080 zamiast 3mb można mieć załóżmy 500 - 700 kb praktycznie bez wizualnie widzialnej różnicy.

Do obróbki zdjęć można użyć prosty, intuicyjny, w pełni profesjonalny program graficzny, alternatywa dla photoshopa, ale z jedną wielką zaletą - jest darmowy:

https://krita.org/

Comments

Co do zmniejszania wagi zdjęć to stosowałem strony tiny.png ale faktycznie nie pomyślałem że rozmiar w tym wszystkim może odgrywać równie dużą rolę.

 

Dziękuję i spróbuję!