1. Kontekst
Aktualnie zajmuję się pisaniem administracji do strony. W jednym z modułów oprócz zwykłego formularza znajduje się pole wyboru zdjęcia.
Wygląda to mniej więcej tak:
<style type="text/css"> .img-browser{ width: 100%; height: 450px; overflow: auto; background-color: #fff; border: 1px solid #E2E6FA; } img.bordered { background-color: #FFF; border: 1px solid #DDD; padding: 3px; } </style> <div contenair="0" rel="data[Person][photo_id]" class="img-browser" id=""> <div class="item" rel="type:2"> <img height="75" width="75" alt="..." class="bordered" rel="photoid:1" src="/img/person/3807de24e82190f0c36e97b5988ce863.jpg"/> <br/>testowe zdjęcie </div> <!-- (...) jest ich powiedzmy 20 --> </div>
Po załadowaniu się strony obserwowany jest każdy obraz akcjami mouseover, mouseout oraz click.
Dodatkowo obserwowany jest dokument na custom event więc generalnie nie ma wielkiego wpływu na wydajność (tak mi się wydaje) bo event odpalany jest przez niektóre funkcje.
Przeglądarka
1. FF 3.5.2 + firebug + Page Speed
2. Chrome 2.0.172.39 (na obu jest to samo)
Windows 7
2. Problem
Kiedy załaduje się strona to mam problem z polem obrazów. Kiedy scrolluję w dół aby zobaczyć inne zdjęcia to się przycina a kiedy przejdę na inną zakładkę i wrócę do formularza to musi minąć kilka sekund zanim obrazki się ponownie nie załadują.
Problem wydajności komputera raczej odpada bo już nie takie rzeczy na nim robiłem a sam sprzęt nie jest zły. Nie raz używałem tego typu widoku (zdjęcia w div z overflow) i też nie miałem z tym problemu.
Może ktoś spotkał się z podobną sytuacją? Nie wiem czy nie przesadziłem z javascriptami czy czymś innym a raczej muszę to poprawić zanim to oddam w inne ręce :-)