Witam

Mam problem z cyklicznie (setInterval) wywoływaną funkcją.
Jej zadaniem jest m.in. podmiana atrybytu src dla <img>:

[HTML] pobierz, plaintext 
function assign_image() {
('#element').attr('src', nowa_sciezka);
}
[HTML] pobierz, plaintext 

Przy każdym wywołaniu tej funkcji zwiększa się zużycie pamięci przez przeglądarkę.
Jak to zwalczyć?

po pierwsze nie jestem pewien, czy podałeś cały dokładny kontekst czy tylko fragment tego co zamierzasz uzyskać...

po drugie każdy z tych obrazków może być buforowanych w danej przeglądarce...

po trzecie skoro wiesz, w którym obrazku zmieniasz ścieżkę to znacznie szybciej by to działało jeśli byś zbuforował gdzieś albo obiekt jQuery z wyszukanym elementem DOM albo sam surowy element drzewa DOM...

najlepiej daj przykład live...

Kod jest trochę zawiły i jest tam kilka innych dodatkowych funkcji dlatego nie zamieszczałem całego.


Jak usunąć w takim razie poprzednie obrazki?



Jak zbuforować taki obiekt DOM? Jakiś przykład, gdzie można to w dokumentacji znaleźć?

Zmienną globalną

[JAVASCRIPT] pobierz, plaintext 
var zmienna = document.getElementById('id'); //$('#id');
function test(){
 zmienna.operacje(); //dzięki temu przeglądarka nie będzie za każdym razem wyszukiwać elementu zmienna
}
[JAVASCRIPT] pobierz, plaintext 

Opisz co chcesz osiągnąć, może jest na to jakiś inny lepszy sposób. Co do cache, to może być problem I daj wreszcie przykład 'live'.

Przykład 'live', kod odpowiedzialny za problem wygląda tak:

[JAVASCRIPT] pobierz, plaintext 
	function check_image(img,id) {
		if (!img.complete) {
			return false;
		}
		if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
			return false;
		}
		timestamp = timestamp + 1;
		loading[id] = 'complete';
		return true;
	}
 
	function assign_image(x) {
		switch(x) {
			case 0: {
				if (loading[x] == 'empty') {
					image0 = new Image();
					var dateNow = new Date(); 
					image0.src = image_output[x] + '&timestamp='+timestamp+'&rand='+dateNow.valueOf();
					loading[x] = 'progress';
				}
				else if (loading[x] == 'progress') {
					check_image(image0,x);
				}
				else if (loading[x] == 'complete') {
					$('#img_src').attr('src',image_output[x] +  '&timestamp='+timestamp);
					loading[x] = 'empty';
				}
				break;
			}
		}		
	}
	function animate() {
		interval_id = setInterval(function() {
				if (mode == "picture") {
					$(counter).html(timestamp);
					//zmiana obrazka
					assign_image(0);
				}
		}, interval/2);
 
	}		
 
[JAVASCRIPT] pobierz, plaintext 

przede wszystkim to nie jest przykład 'live' (co znaczy, że miałeś podać linka do strony internetowej z działającym całym kodem)...

poza tym kod który podałeś nie trzyma się kupy... rozumiem, iż start jest od animate(), potem zawsze wykonujesz kod assign_image(0) [no warunkowo ale...]...

w funkcji assign_image(x) niby tworzysz tymczasowy obiekt obrazka do pobrania ale nie wiem po co skoro po załadowaniu nigdzie go nie wyświetlasz...[PRZECZYTAJ CAŁOŚĆ - WIEM, CHCESZ GO WYŚWIETLIĆ ;P] poza tym gdy już nie potrzebny jest obiekt Image mógłbyś go usunąć gdyż przechowuje wiele danych - a ponieważ jest on przypisany do zmiennej lokalnej to nie zadziała delete i tej zmiennej lokalnej musisz przypisać NULL - różnie to bywa z czyszczeniem zmiennych lokalnych, a ponieważ obiekt i tak przekazujesz dalej przez referencję to nie zostawiaj niepotrzebnych referencji...

następna sprawa samo sprawdzanie czy obrazek załadowany - po co aż tyle sprawdzeń skoro masz zdarzenia dla tego obiektu .onload i .onerror do których możesz przypisać funkcję... ale mniejsza o to...

to co mnie dalej zastanawia, to przy sprawdzeniu, czy obrazek został załadowany zwiększasz zmienną timestap i ustawiasz loading na zakończony - i patrzmy dalej gdy loading zakończony... podmieniasz atrybut src jakiegoś obrazka w DOM'ie ale!!! z nowym timestapem!!! TO PO CO WCZYTYWAŁEŚ DO BUFORU WCZEŚNIEJSZY OBRAZEK SKORO NAWET Z NIEGO NIE SKORZYSTAŁEŚ?

następny przebieg dla tego samego obrazka będzie o tyle szybszy, że choć buforujesz to znowu nie potrzebnie gdyż ten obrazek jest już wcześniej wczytywany do przeglądarki do drzewa DOM przez obiekt $('#img_src') - no do następnego przebiegu nie zwiększasz timestap... i dalej się dzieje to co pisałem od początku...


DAJ PRZYKŁAD LIVE TO PRĘDZEJ KTOŚ POMOŻE ;]

Chyba do końca nie wiedziałem o co chodzi z tym live .
Niestety nie jest możliwe pokazanie tego live, gdyż działa to tylko na lokalu.
Spróbowałem rozwiązać trochę inaczej funkcje assign_image :

[JAVASCRIPT] pobierz, plaintext 
 
	function assign_image(x) {
		var image_url = null;
		var img_content = null;
		var dateNow = null;
		switch(x) {
			case 0: {
					dateNow  = new Date(); 
					image_url = image_output[x] + '&timestamp='+timestamp+'&rand='+dateNow.valueOf();
					//alert(image_url);
					$.ajax({
						url: image_url,
						cache: false,
						success: function(){
							img_content = '<img id="img_src" src="' + image_url+ '" >';
							$(img_content).bind("load", function () { 
								$('#img_src').replaceWith(img_content);
							});
						}
					});
					break;
			}
		}		
	}
 
[JAVASCRIPT] pobierz, plaintext 

Zauważyłem, ze nawet jeśli w odpowiedzi ajax nie będzie obrazka z każdym nowym żądaniem rośnie zużycie pamięci przeglądarki.
Czy jest tak, że po uzyskaniu odpowiedzi z serwera obiekt XMLHttpRequest zajmuje pamięć. Czy można usunąć go ręcznie?

Skrypt działa tak, że np co 500 ms pobierany jest nowy obrazek, który zastępuje poprzedni. Czy usunięcie poprzedniego obrazka z drzewa DOM spowoduje usunięcie go z pamięci przeglądarki?

Jakieś pomysły?