[JavaScript][PHP] Cache obrazkowych Cyfry wyświetlanych zegarze. Opcje

[Giluś]

Cześć, zamieniłem sobie cyfry od 0 do 9 na obrazkowe które mają ~2.2kb (sztuka) łącznie ~23kb i problem polega na tym iż nie ma płynnego przejścia między cyframi tylko są takie przeskoki, na komputerze gdy testowałem było wszystko OK, ale to dlatego iż na komputerze to LocalHost, a wiec o wiele szybsze działanie niż na normalnej stronie.. wydaje mi się, że taki skoki można by ominąć gdyby pobrać na samym początku (otwarciu) strony wszystkie te cyfry i je przechowywać w jakimś Cache czy coś podobnego.. aby nie ładować co 1 sekunde ponownie obrazka.. - Jak takie coś zrobić mój kod JS wygląda tak:..

[JAVASCRIPT] pobierz, plaintext 
function liczCzas(ile) {
			dni = Math.floor(ile / 86400);
            godzin = Math.floor((ile - dni * 86400)/ 3600);
            minut = Math.floor((ile - dni * 86400 - godzin * 3600) / 60);
            sekund = ile - dni * 86400 - minut * 60 - godzin * 3600;
            if (godzin < 10){ godzin = '0'+ godzin; }
            if (minut < 10){ minut = '0' + minut; }
            if (sekund < 10){ sekund = '0' + sekund; }
            if (ile > 0) {
                ile--;
           var str = godzin + minut + sekund;
 
				document.getElementById('czas').innerHTML = 
				'<div class="box"><img src="gfx/cyfry/'+ str[0] +'.png" alt="Logo" /></div>' +
				'<div class="box"><img src="gfx/cyfry/'+ str[1] +'.png" alt="Logo" /></div>' +
				'<div class="pkt">:</div>' +
				'<div class="box"><img src="gfx/cyfry/'+ str[2] +'.png" alt="Logo" /></div>' +
				'<div class="box"><img src="gfx/cyfry/'+ str[3] +'.png" alt="Logo" /></div>' +
				'<div class="pkt">:</div>' +
				'<div class="box"><img src="gfx/cyfry/'+ str[4] +'.png" alt="Logo" /></div>' +
				'<div class="box"><img src="gfx/cyfry/'+ str[5] +'.png" alt="Logo" /></div>';
 
			setTimeout('liczCzas('+ile+')', 1000);
            } else {document.getElementById('czas').innerHTML = 
			'<div class="box"><img src="gfx/cyfry/0.png" alt="Logo" /></div><div class="box"><img src="gfx/cyfry/0.png" alt="Logo" /></div><div class="pkt">:</div><div class="box"><img src="gfx/cyfry/0.png" alt="Logo" /></div><div class="box"><img src="gfx/cyfry/0.png" alt="Logo" /></div><div class="pkt">:</div><div class="box"><img src="gfx/cyfry/0.png" alt="Logo" /></div><div class="box"><img src="gfx/cyfry/0.png" alt="Logo" /></div>';
 
			}}
[JAVASCRIPT] pobierz, plaintext 

Pozdrawiam i z góry bardzo dziękuje za pomoc .

[404]

Ja bym na Twoim miejscu popróbował pobawić się ze stylami (display:[block|none]). Pomocne linki:
http://api.jquery.com/hide/
http://api.jquery.com/show/
http://api.jquery.com/toggle/

Ten post edytował 404 22.12.2012, 17:39:08

[Giluś]

Nie wiem czy to pomogło, czy też 'samo się naprawiło' ale zrobiłem ukrytego diva na samym początku strony (pod body) a w nim dałem wszystkie te cyfry od 0 do 9 i problem znikł, tak jak gdyby te obrazki się załadowały jako pierwsze i przeglądarka je sobie zapisała w pamięci.

[kamil4u]

Wrzuć obrazka do Cache. Możesz to zrobić za pomocą JS i new Image. W Google znajdziesz odpowiednie info.