[PHP][HTML] Nietypowy problem ze zdjęciami na stronie Opcje

[jg44]

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

[spokoloko123]

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

[jg44]

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...

[Niktoś]

<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.

[jg44]

<li style="display: list-item;">

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...

[Niktoś]

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

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.

Ten post edytował Niktoś 24.02.2012, 19:17:38

[jg44]

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łę.

[Niktoś]

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?

Ten post edytował Niktoś 24.02.2012, 19:46:32

[vonski]

<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.

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.

Ten post edytował vonski 24.02.2012, 19:49:36

[Niktoś]

jak miałeś li {display:none;} i chcesz go z powrotem pokazać to jak to zrobisz inaczej niż li { display:list-item; }?

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.

[jg44]

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

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

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.

[Niktoś]

display: list-item;

You can turn many html elements into list items using the display property. For example, you can use span, div and p tags as list items instead of the li tag.

Więc trochę zjechali sprawę.

Ten post edytował Niktoś 24.02.2012, 20:22:34

[vonski]

Więc trochę zjechali sprawę.

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

[Niktoś]

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ą.

Ten post edytował Niktoś 24.02.2012, 21:01:18

[vonski]

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.

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:

Ogólnie źle napisany slajder ,jeśli z galerią takie jaja wychodzą.

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

Ten post edytował vonski 24.02.2012, 21:11:46

[spokoloko123]

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?

[Niktoś]

Ul jest elementem blokowym

<ul>
<li>1</li>
<li>2</li>
<li style="display:block;>3</li>
</ul>

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.

<ul>-ul jest standardowo display block
<li>1</li>-li jest display block
<li>2</li>-li jest display block
<li>3</li>-li jest display block
</ul>

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.

Ten post edytował Niktoś 24.02.2012, 21:27:17

[vonski]

Chcą pokazać schowany element to można było użyć block,gdzie sam tag li jest elementem blokowym.

definiowanie<li style="display:block;>3</li> też nie ma sensu,

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.

[Niktoś]

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.

Ten post edytował Niktoś 24.02.2012, 21:43:51

[jg44]

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?

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