Witam,
mam (chyba nietypowy) problem z galerią zdjęć. Posiadam dość dużą galerię (187 zdjęć), które są powrzucane do trzech sliderów (do jednego 160, do drugiego 17 i do trzeciego 10). Problem polega na tym, że czasami po załadowaniu strony, pewne (losowe) zdjęcia są zniekształcone, a czasem wyświetlają się normalnie, przykładowo, powinno być normalnie:

a czasem jest:

Kiedyś strona była tylko w HTMLu, i nigdy takich problemów nie było. Potem dodałem shoutbox, więc musiałem zmienić na PHP i wtedy takie problemy zaczęły się pojawiać (także na localhoście). Ktoś ma pomysł, czemu tak się dzieje i jak temu zaradzić? Czy może to mieć związek z tym, że galeria dość dużo waży i serwer 'nie nadąża' ładować kolejnych zdjęć i dlatego się zniekształcają?
Podgląd live strony jest tutaj:
Strona
Poodświeżajcie kilka razy stronę i zobaczcie, czy u Was też tak jest, czy może tylko mi się tak wyświetla.
Z góry dzięki,
Pozdrawiam

Ustaw dodatkowo w CSS wielkość obrazów i powinno być dobrze.

OK, faktycznie zapomniałem ustawić CSSem rozmiaru zdjęć, zrobiłem tak, niestety nie zmienia to faktu, że problem pozostaje...
Nie mam pomysłu, czemu tak się dzieje, w mojej skromnej karierze zrobiłem pare stron, ale takiej sytuacji nie miałem nigdy. Czasem po prostu może być tak, że można błędnie wpisać rozszerzenie pliku *.jpg (np. 80% aparatów fotograficznych zapisuje pliki *.JPG), ale wtedy zdjęcie po prostu nie wyświetla się wcale. Tutaj nie ma takiego konfliktu, wszystkie rozszerzenia są w porządku...

<li style="display: list-item;">
Powiedz mi jaki sens ma użycie display:list-item dla elementu li?To tak jakbyś smarował chleb z masłem,margaryną.Daj block ,ustaw też wysokości i szerokości.

Dla wszystkich img:
<img alt="<strong>Śluza Szczytniki</strong> / Przekop Szczytnicki (1/10)" src="src/s/s1.JPG" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 10; width:auto;height:auto; opacity: 1;">
Wtedy obrazek dopasuje się Ci się do szerokości rodzica.

Gdzie w moim kodzie znalazłeś taki styl? Ja nic o takim nie wiem.

Co do rozmiaru, mam takie coś po prostu:

[CSS] pobierz, plaintext 
.galeria img {
	width: 500px;
	height: 375px;
}
[CSS] pobierz, plaintext 

Twój kod próbowałem, ale nadal nic nie zmienia...

Odpal firebuga i zobacz.
Może, ustaw wszędzie na sztywno tam gdzie można wysokości i szerokości jeśli to nie zadziała to przykładowo:

height:400px !important.
!important powoduje ,że ta właściwość nigdy nie zostanie nadpisana,ani przypadkowo zmieniona.

Dzięki za wkład, ale dalej nic. Na razie dodałem !important, dopisanie na sztywno zrobię później, bo dla tylu zdjęć trochę to będzie trwało
Jesteś pewien, że wina na pewno leży po stronie styli? Moim zdaniem (znaczy nie wykluczam winy styli), ale może być coś z 'obciążeniem' (czasem odpowiedzi z serwera). U mnie problemy występują głównie na mostach (160 zdjęć) i czasem w jazach (17 zdjęć). Śluzy zawsze do tej pory odpalały się bez zarzutu.
Może to też jest kwestia przeglądarek? Zazwyczaj używam IE9 i w nim strona działa najlepiej - czasem się sypie, ale w sumie nie najczęściej. W najnowszej becie Firefoxa ogólnie też nieźle, choć częściej są problemy. Z kolei w najnowszej Operze tragedia totalna, nie dość, że strona ładuje się około minuty, to jeszcze praktycznie co drugie zdjęcie jest zmasakrowane.
A, jeszcze taka uwaga. W Firefoxie (i jak się już załaduje to w Operze też) jak przeglądam kolejne zdjęcia, to (czasami) efekt przejścia z jednego do drugiego jest bardzo niepłynny - tak jakby "szarpie" jedno zdjęcie na siłę.

U mnie także wolno się wczytywało.Trochę to nie optymalnie zrobiłeś .Zrobiłeś listę dla każdego obrazka osobny tag <img>.A nie lepiej było utworzyć jeden tag img i podmieniać tylko ścieżke src np.po kliknięciu następne /poprzednie np używając js?

A jak miałeś li {display:none;} i chcesz go z powrotem pokazać to jak to zrobisz inaczej niż li { display:list-item; }? Ma to jak najbardziej sens, tym bardziej, że jg44 tego nie wpisał "z palca" tylko jQuery to dokleja do aktualnie wyświetlanego elementu listy.

Inna sprawa, że nie wydaje mi się, żeby to była wina stylów, bo tylko czasami jakiś obrazek ma źle przypisaną wysokość - jeśli były by to style wtedy każde zawsze by miał złą wysokość Myślę, że to sam skrypt coś miesza, tym bardziej, że w kodzie strony obrazki nie mają żadnych stylów, natomiast po załadowaniu w Firebugu można zobaczyć style przypisane inline, czyli to robota jQuery. Jeśli więc chcesz się bawić stylami to robiłbym to z poziomu jQuery, np.

[PHP] pobierz, plaintext 
 
$('img').each(function() {
    $(this).css('height', '400');
});
 
[PHP] pobierz, plaintext 

Oczywiście to ma cie tylko naprowadzić - taki kod przypisze KAŻDEMU obrazkowi na stronie wysokość 400 px.

Nie pomyślałem ,że to może być generowane przez jakiś skrypt ,ale ja bym zrobił style display:block;
!important także powinno zapobiec nadpisywaniu styli,ale można próbować narzucać wysokości w js.

Właśnie takie samo odnoszę wrażenie - style zawsze działają tak samo, albo działa, albo nie, nie ma że raz zdjęcie otworzy się całe, a raz w połowie.
Dodałem Twój skrypt i po kilkunastokrotnym odpaleniu strony w IE i FF działa - już tylko z Operą są problemy. Za chwilę zamontuję sobie jeszcze Chrome'a, bo ciekawy jestem, jak tam wygląda sytuacja.

Więc trochę zjechali sprawę.

W jakim sensie, kto i dlaczego zjechał sprawę?

Napisałem w pierwszym poście jaki to ma sens?
<li style="display: list-item;"> listuje takie tagi jak span, div i p (instead of)zamiast tagu li.Może widzisz w tym sens bo ja nie.Sam element li już listuje więc po co listować za pomocą css?Chcą pokazać schowany element to można było użyć block,gdzie sam tag li jest elementem blokowym.
Ogólnie źle napisany slajder ,jeśli z galerią takie jaja wychodzą.

Ma sens. Schowany element <li> pokazuje się za pomocą display:list-item i koniec Jeśli zastosujesz na nim display:block nie będzie to już element listy a zwykły element blokowy. Element listy jak najbardziej zachowuje się jak element blokowy, ale nie jest to zwykły <div> bo jeśli by tak było to jaki sens w ogóle używać list?
Dla przykładu:

[HTML] pobierz, plaintext 
<ul>
<li>1</li>
<li>2</li>
<li style="display:block;>3</li>
</ul>
[HTML] pobierz, plaintext 

stworzy listę, której trzeci element będzie zwykłym divem a co za tym idzie nie będzie posiadał punktora przed sobą - tym się właśnie różni display:block od display:list-item
Dlatego nie wydaje mi się, żeby autorzy jQuery zjechali tutaj w jakikolwiek sposób sprawę.

edit:



A no i jeśli już to nie źle napisany slajder, tylko źle napisany framework Jak już mamy kogoś obwiniać

Przyjrzałem się na 4 przeglądarkach sprawie i najlepiej działa na chrom i 90% szans że zdjęcie się w ten sposób wczytuje i dostaje jakiegoś laga przeglądarka, mi osobiście nie zatrzymał się obraz ani razu ale zuważyłem moment zwisu przy pierwszych wczytywaniach. Problem występuje tylko na początku ładowania więc dlatego obstawiam transfer. Chyba, że... w jakiej rozdzielczości i rozmiarze umieszczasz zdjęcia?

Ul jest elementem blokowym

I definiowanie<li style="display:block;>3</li> też nie ma sensu, gdyż i bez tego jest to blok ,jakby nie to <li><div></div></li>nie mógłbyś takiego czegoś zrobić, bo nie można zagnieżdżać elementów blokowych w inline.
W htmlu zazwyczaj jest tak ,że elementy dziedziczą po rodzicu inherit-standardowe ustawienie.

Jeśli coś jest blokowe to reszta też jest blokowa chyba że zdefiniujesz inaczej.
Jakby li było standardowo inline to nie mógłbyś umieszczać żadnych elementów blokowych,ani zrobić sobie hover czy to w css ,czy w js.

Raz piszesz że żeby pokazać schowany element można było użyć block (bo chodziło o element <li>), żeby zaraz napisać, że <li style="display:block;"></li> nie ma sensu. To się zdecyduj.

A swoją drogą to wg ciebie ani <li style="display:block;"></li> nie ma sensu ani <li style="display:list-item;"></li> nie ma sensu to pytam - jak chcesz pokazać schowany element??
Inna sprawa że nie masz racji, bo i jedno i drugie ma sens, zależy od przypadku.

Z mojej strony to tyle, bo nie chcę robić offtopa.

Ehm,no i tak dyskutując z tobą doszedłem do konkluzji ,że to obojętne chyba jest.Chodziło mi definiowanie pól-definiowanie blokowego co jest już blokowe,albo listowanie czegoś co jest już wylistowane -to dla mnie nie ma sensu,ale pokazać,gdy coś jest już ukryte w tym przypadku użycie block,czy list-item nie ma znaczenia chyba.

Zdjęcia są 500x375px, rozdzielczość jest słaba (96dpi), uważam, że to nie są wygórowane wartości. Chociaż ostatecznie każde zdjęcie ma ~100kB, zatem te 187 zdjęć waży około 19MB, więc jednak teoretycznie mógłby być problem.
Tą stronę mam już od dawna i kiedyś miała taki wygląd (zdjęcia 640x480!) i nigdy nic się nie sypało:
Stara wersja
Aktualnie wygląda tak:
Teraz
Nie do końca jednak mi się on podoba i wymyśliłem to, o czym tutaj debatujemy, no i jest ten wspomniany problem...


A tak na marginesie, to Panowie spokojnie

Włącz firebuga.
Po prostu masz dużo obiektów img ,mimo że są ukryte ,a tylko jeden pokazany to i tak do wszystkich tagów wczytywane są obrazy.
Jakbyś utworzył jeden tag img i podmieniał tylko ścieżki dostępu do pliku w atrybucie src przy kliknięciu na przcisk poprzedni ,następny to ,nie byłoby lepiej?

Byłoby, problem w tym, że tutaj trzebaby raczej użyć AJAX. Nie mam zbyt dużego pojęcia o tej technologii, więc to rozwiązanie (jak na razie) wykracza poza moje granice...

Patrzę na stronkę i js by w zupełności wystarczył.

No dobra, może uda mi się coś wymyślić. Ale to najwcześniej jutro
Dziękuję Wam za wkład

To może zamiast kazać użytkownikowi ściągać te 19 MB zraz po wejściu na stronę, ładuj np. tylko 3 zdjęcia (albo 5, albo ile chcesz ale nie wszystkie na raz ) na wejście - pierwszy, drugi i ostatni slajd (ostatni dlatego, że sąsiaduje z pierwszym tylko że od drugiej strony ). Po każdym kliknięciu w następny / poprzedni ładuj w tle kolejne zdjęcie. Na szybko wymodziłem coś takiego, może ci się przyda:
http://tomek.rychtyk.pl/workshop/slider/test.html

Jest tu w sumie 21 slajdów, każdy waży ponad 200kb, jednak zaraz po wejściu ładują się tylko 3 z nich, potem kolejne, kolejne itd.
Działa tylko 'Następy' bo ma to być tylko przykład jak to można ewentualnie robić - reszty mi się po prostu nie chciało Kod jest mniej więcej taki:

[PHP] pobierz, plaintext 
        $(function() {
 
            var current = 2;
            var amount = 21;
 
            // następny slajd
            $('#next').click(function() {
 
                if(current == amount) {
                    // aktywny ostatni slajd i kliknięto następny
                } else {
                    $('.slider').append('<img style="left:700px" id="photo' + (current + 2) + '" src="' + (current + 2) + '.jpg" />');
                    $('#photo' + current).animate({
                        'left': -700
                    }, 1000);
                    $('#photo' + (current + 1)).animate({
                        'left': 0
                    }, 1000);
                    current++;
                }
 
                return false;
            });
        });
[PHP] pobierz, plaintext 

Jedyne założenie jakie tu przyjąłem jest takie, że obrazki są numerowane o 1 do n a rozszerzenia pisane są małą literą.

Nie no super, dziękuję!
Będę tylko musiał pozmieniać rozszerzenia na JPG, bo mam ich więcej, no i pozmieniać nazwy zdjęć, bo aktualnie zdjęcia nie są wyświetlane od 1 do n.