Galeria fotografii

0

Witam

Koledzy zrobiłem dla żony stronkę z jej fotografią...

Problem polega na tym, że początkowo zmiana zdjęć przebiega bardzo ładnie i płynnie. Natomiast po jakimś czasie zmiana zdjęć zaczyna zachowywać się różnie.. Czas się wydłuża i czasem w ogóle nie następuje zmiana...

www.magdalena-tulecka.pl

Mechanizm wymyśliłem taki:

Tworzę 7 i ustawiam ich wysokośći szerokość na 0px.
Sprawdzam, które miniaturki są widoczne i na tej podstawie ładuję kolejno wcześniej utworzone - taki sposób na preload zdjęć.

Dodatkowo dwa na zdjęcia wyświetlane. Wyświetlane są naprzemiennie z tym, że jeśli jest wyświetlany np. nr 1 a ja włączę inne zdjęcie, to nr 2 się ładuje i na zdarzenie onload dokonuje podmiany zdjęcia.

Początkowo działa to super, ale po chwili zaczyna szwankować....

Pomoże ktoś sugestią, podpowiedzią .....

Z góry dzięki, pozdrawiam

0

Jeżeli to ty to sorry widać że początkujący jesteś ale tą galerię napisał jakiś debil nie mający pojęcia co tak na prawdę robi...
Przeglądarka wszystko wali do ramu z każdym nowo dodanym zdjęciem.. jak mam firefox'a z ~189000 K po przewinięciu paru wali mi do ~ 230000 K...
A jak jeszcze klikniesz za szybko to js pierd**i i nawiązuje kilka połączeń
Pobierz sobie wtyczke FireBug do FF i w zakładce Sieć sprawdź ile, czego i jak długo się ładuje, jak to zobaczysz to możemy gadać dalej.
Poza tym zabezpiecz sobie katalogi żeby nie można było listować zawartości przeglądarką (pliki .htaccess) bo pobrałem sobie ~40MB zdjęć w mniej niż minute ;] i pytanko jaki pakiet kupiłeś na tym webd.pl

0

Trochę nie na temat, ale ja bym to ADMIN z prawego dolnego rogu wywalił, no chyba, że chcesz się pożegnać ze stroną. :D

0

proqix - ja prosiłem na tym forum o pomoc... Jeśli chciałbym usłyszeć że jestem debilem bo zrobiłem stronkę dla swojej Żony to założyłbym temat - "Proszę napiszcie mi, że jestem debilem".
Twoja wypowiedź świadczy tylko o tobie o tym jak wychowali Cię Twoi rodzice, a założę się, że starali się bardzo. To że znasz kilka sztuczek nie czyni Cię mądrym do tego stopnia, aby się w taki sposób wypowiadać.

Po prostu:
chcesz pomóc = pomóż;
Chcesz a nie umiesz - napisz, że bardzo chciałbyś pomóc, ale niestety nie znam się na tyle dobrze...;
Nie chcesz pomóc - zamilcz;
Chcesz obrażac innych - (nie jestem adminem, ale uważam, że powinieneś poszukać innego forum albo wyjść na swoje podwórko)

Guzik admin jest dla żony, aby kierował ją na podstronę gdzie wrzuca zdjęcia. Wiem, że można zrobić to wiele innych sposobów ale dla mojej żony w tym temacie musi być prosto... :)
(zabezpieczyłem funkcją "real_escape_string")...

Czy ktoś podpowie, co możnaby zrobić z tą galerią? Albo chociaż nakierować na jakiś właściwy tor myślenia....

Pozdrawiam

0

Za bardzo skupiłeś się na tym co o tobie myślę, więc trochę łagodniej teraz...
Jaki masz komp bo jak to jest Intel Pentium 4 i 1GB RAM'u na Win7 to będzie mulić bo za słaby komp i kod nie jest optymalizowany, jak zajrzysz do kodu masz tyle pustych linii między wierszami spacji i innych badziewi których nie powinno być na produkcji tylko w fazie developmentu zauważ że przeglądarka musi sparsować to co jest wypisane więc musi sobie sam wywalić te niepotrzebne znaczki więc na słabych kompach to wolniej chodzi i ci przymula u mnie w domu na pc z prockiem Pentium D 3.4GHz (trochę styranym) 3GB RAM też muli ale w pracy mam kompa z i5 3GHz 8GB RAMu wszystko pięknie działa więc mówię optymalizuj kod, poza tym słabe kompy zabija ci animacja przewijania.

// post o bardzo niskiej wartości merytorycznej - mq

0

kod nie jest optymalizowany, jak zajrzysz do kodu masz tyle pustych linii między wierszami spacji i innych badziewi których nie powinno być na produkcji tylko w fazie developmentu zauważ że przeglądarka musi sparsować to co jest wypisane więc musi sobie sam wywalić te niepotrzebne znaczki więc na słabych kompach to wolniej chodzi i ci przymula

ahahahaha, ciesz się, że publiczne bredzenie nie jest karalne, bo byś dostał dożywocie :D

@Bodek6:
Nie chciało mi się zaglądać w kod wcześniej, teraz również mi się nie chce, tyle wiem, że przedtem po prostu dodawałeś coś w pętli, co powinno się zrobić raz, więc zaczynało zamulać (ja tego nie zauważyłem, bo kiepsko opisałeś co tak naprawdę zamula, a i czasu nie miałem). Najprościej jest jednak stosować gotowe (więc sprawdzone) rozwiązania jeżeli nie jest się jeszcze na wysokim poziomie świadomości tego, co się pisze. Jak poprawiłeś - to fajno, jak coś będzie nie tak - pomyśl nad gotowcem, a także lepszym formułowaniem pytań ("zamula, macie URL" - Twój post w skrócie, lepsze: "tu fragment kodu odpowiedzialny za to i to, jeżeli go wyrzucę - jest ok, z nim zamula, dlaczego? + jakieś demko online') ;) A tego frustrata nie słuchaj.

0

OK, więc tak :)

jest tablica ze zdjęciami: fota[][] - numer, wymiary itp...

tworze dwa obrazy:

var im1 = new Image();
im2 = new Image();

potem ma funkcje do wyskalowania:

function skaluj() {
 ....
};

w HTML mam dwa divy:

			<div id="image1" style="position: absolute; opacity: 1; width: 58%; height: 400px; border: solid 0px red; background-repeat: no-repeat; background-image: url(''); background-position: center center; background-size: contain;">
				<img src="" id="fotografia1" alt="obraz galerii"/>
			</div>

			<div id="image2" style="position: absolute; opacity: 0; width: 58%; height: 400px; border: solid 0px red; background-repeat: no-repeat; background-image: url(''); background-position: center center; background-size: contain;">
				<img src="" id="fotografia2" alt="obraz galerii"/>
			</div>

potem jest tak:


if (fotka == 2) fotka = 1; else fotka = 2;

function zaladowano(){
	$("#loader").animate({opacity: 0}, 200);

	if (fotka == 1) {
		$("#fotografia1").attr("src", im1.src);
		skaluj("#fotografia1", fota[2][numer], fota[3][numer]);

		$("#image2").animate({opacity: 0}, 500, function(){
			//$("#fotografia2").attr("src", "");
			//im2.src	= "";
		});
						
		$("#image1").animate({opacity: 1}, 500, function(){if (info) $("#fotoInfo").fadeIn(500); if (!info) $("#fotoInfo").fadeOut(500);});
	}

	if (fotka == 2) {
		$("#fotografia2").attr("src", im2.src);
		skaluj("#fotografia2", fota[2][numer], fota[3][numer]);

		$("#image1").animate({opacity: 0}, 500, function(){
			//$("#fotografia1").attr("src", "");
			//im1.src	= "";
		});
						
		$("#image2").animate({opacity: 1}, 500, function(){if (info) $("#fotoInfo").fadeIn(500); if (!info) $("#fotoInfo").fadeOut(500);});
	}
				
};


function wPrawo() {
	numer++;

	if (numer > iloscZdjec) numer = 1;
				
		pozycja = numer * szerokoscMiniaturki - szerokoscMiniaturki;
		if ((pozycja > 366) && (numer < iloscZdjec-2))
		$("#miniaturki").animate({"left": -pozycja+366}, 300, function(){pozPaskaX = $("#miniaturki").css("left").substring(0, $("#miniaturki").css("left").length-2);});

		if (numer == 1)
		$("#miniaturki").animate({"left": 0}, 300, function(){pozPaskaX = $("#miniaturki").css("left").substring(0, $("#miniaturki").css("left").length-2);});

		pozPaskaX = parseInt(pozPaskaX);

		if (fotka == 2) fotka = 1; else fotka = 2;

		$("#loader").animate({opacity: 1}, 200);

		$("#fotoInfo").fadeOut(200, function(){
		if (fotka == 1) {
			im1.src		= fota[1][numer];
			im1.onLoad	= zaladowano();
		}
		if (fotka == 2) {
			im2.src		= fota[1][numer];
			im2.onLoad	= zaladowano();
		}
	});
}


function wLewo() {
	numer--;

	if (numer <= 0) numer = iloscZdjec;

	pozycja = numer * szerokoscMiniaturki - szerokoscMiniaturki;
	if ((pozycja > 244) && (numer > 3) && (numer < iloscZdjec-2))
	$("#miniaturki").animate({"left": -pozycja + 366}, 300, function(){pozPaskaX = $("#miniaturki").css("left").substring(0, $("#miniaturki").css("left").length-2);});

	if (numer == iloscZdjec){
		przes = (-szerokoscMiniaturki*iloscZdjec) + szerokoscPaska;
		$("#miniaturki").animate({"left": -pozycja + szerokoscMiniaturki * 6}, 300, function(){pozPaskaX = $("#miniaturki").css("left").substring(0, $("#miniaturki").css("left").length-2);});
	}

	pozPaskaX = parseInt(pozPaskaX);

	if (fotka == 2) fotka = 1; else fotka = 2;

	$("#loader").animate({opacity: 1}, 200);

	$("#fotoInfo").fadeOut(200, function(){
	if (fotka == 1) {
		im1.src = fota[1][numer];
		im1.onLoad = zaladowano();
	}
	if (fotka == 2) {
		im2.src = fota[1][numer];
		im2.onLoad = zaladowano();
	}
});
}

Teraz zachowuje się to tak, że zmiana zdjęć następuje, ale zanim pojawi się nowe zdjęcie, to jakieś inne wskakuje na miejsce nowego przyjmując rozmiary również nowego. Tak więc, zanim pojawi się nowe zdjęcie to wcześniej dzieją się dziwne rzeczy :(

Zobaczy ktoś na ten kod??

Z góry dzięki, Pozdrawiam

0

Wiem, trochę chaotycznie pewnie wygląda mój temat, ale walczę z tym dziś od rana.... I to jeszcze w pracy .... Coś zrobiłem znowu, i działa :), ale czy tak jak należy?..
Teraz net mi w firmie strasznie zamuliło, więc jest naprawdę wolny, i widzę, że po zmianie każda fotka ładuje się. Trwa to koło 1-2 sekund. więc na normalnym łączu powinno być OK.

Z czasem spróbuje zrobić jakiś sensowny preload zdjęć.

dzek69 - dzięki :) Wiem, że można skorzystać z gotowców, ale to nie w moim stylu :)) Może zjada mnie ambicja ale muszę to zrobić sam.... Bez sensu byłoby korzystać z gotowców jeśli finalnie uzyska się efekt zadowalający. Może będzie to odbiegało bardzo daleko od profesjonalizmu, ale będzie moje :)))

Zobaczę jeszcze w domku na spokojnie na to:))

Pozdrowionka, Dzięki:)

0

Koledzy...

Jeszcze raz bardzo proszę o pomoc...

Zmodyfikowałem całkiem galerię mojej Żony....
Wszystko moim zdaniem śmiga ładnie....

Chcę tylko po sobie posprzątać i jakoś wyczyścić z pamięci załadowane zdjęcia....

Jak to uczynić.....

Pomożecie?

mam obiekty Image:


var im = [];

for (a=2; a <= iloscZdjec; a++){
	im[a] = new Image();
	im[a].onload = wskaznik; // postęp ładowania
	im[a].src = fota[1][a];
}

potem wszystko śmiga już ładnie...

Jak to potem uprzątnąć (wyczyścić) ?

Z góry dzięki
Pozdrawiam

0

jak Ci całe im niepotrzebne to po prostu im=null; - przeglądarka sama zwolni pamięć jak uzna za słuszne i to już nie Twój problem :)

0

Dzięki ogromne dzek69 - Dobra Duszo. Czasem rzeczy najprostsze okazują się jednymi z trudniejszych :)

Pozdrowionka :)

0

Nie nie to nie problem zwalniania pamięci... ktoś mnie wyśmiał o ile pamiętam... ale nie
@dzek69 "przeglądarka sama zwolni pamięć jak uzna za słuszne i to już nie Twój problem"
W ogóle nie jego problem bo FF czy Chrome zwalnia mniej-więcej inteligentnie ale są jeszcze IE,Opera,Netscape i inne których nawet nie pamiętam...

@qwerty123456
Po ch**j zabezpieczać... wyśmiali mnie... on nie prosił o pomoc w poprawieniu działania strony...

1 użytkowników online, w tym zalogowanych: 0, gości: 1