2012-02-13 15 views
6

Tworzę stronę/aplikację, która prezentuje szeroką gamę produktów. Jeden widok zawiera spis około 130 produktów, a łuk reprezentowany przez obraz png, rozmiar waha się od 33Kb do 150Kb.Dlaczego przeglądarka Chrome działa tak wolno podczas ładowania wielu (≈130) obrazów png?

Skład można przewijać poziomo wzdłuż paska przewijania użytkownika lub kontrolera niestandardowego, a po umieszczeniu wskaźnika myszy na każdym produkcie używam som css-transistions, aby wyciszyć wszystkie produkty poza tym, które się unosiły i powiększyć.

Działa idealnie gładko w Safari i przyzwoitej przeglądarce Firefox, a także w Chrome, o ile utrzymuję odliczanie obrazu. Ale im więcej zdjęć próbuję dodać, zarówno przewijanie, jak i transkrypcje stopniowo stają się wolniejsze, dopóki nie można z nimi pracować.

Czy to jakiś błąd w pamięci podręcznej w chrome? Czy jest jakiś sposób obejścia tego?

Próbowałem wstępnie załadować obrazy, ale problem nie dotyczy czasu ładowania i obrazu, jego wydajność wydaje się zatrzymywać ze względu na ogromną liczbę obrazów.

+0

Znalazłem inne przypadki, w których Chrome jest niewytłumaczalny sposób powolny w porównaniu z innymi przeglądarkami. – Marcin

+0

Osobiście znajdę witrynę, która zablokuje 130 produktów za jednym zamachem. Ale to kwestia projektowa, a nie programowa. :) – Almo

+1

Hm, okazuje się, że problem polegał na tym, że zaktualizowałem właściwość stylu "position" do "absolute" poprzez ustawienie stylu inline poprzez javascript. Kiedy zrobiłem to, dodając zamiast tego klasę do obrazu, działało to lepiej. Dziwne. – Nils

Odpowiedz

2

Możesz łączyć wszystkie swoje małe obrazy w jednym dużym obrazie i ładować TYLKO duży obraz, dzięki czemu wykonujesz tylko JEDNĄ prośbę HTTP. Aby wyświetlić, należy ustawić przesunięcie (właściwość position-tło) każdego obrazu za pomocą css.

Tutorial

+0

Google robi to samo: http://www.google.it/images/nav_logo102.png – tyranitar

+0

Problem nie polega na żądaniach http, kiedy usunąłem część, w której zmieniłem wbudowane arkusze stylów (pozycja: bezwzględna) i zamiast tego dodano klasa, która zrobiła to samo, działała dobrze. Ponadto, nie jest to naprawdę opcja utrzymywania obrazów produktów w sprite'u, ponieważ konserwacja byłaby koszmarem. – Nils

+0

Utrzymanie nie jest problemem, jeśli używasz automatycznego skryptu, który łączy wszystkie małe obrazy w większe. Po zmianie obrazu wystarczy ponownie uruchomić skrypt – tyranitar

Powiązane problemy