JavaScript - wczytanie obrazków

pytanie zadane 5 września 2016 w JavaScript przez Miki Bywalec (2,480 p.)

W ramach nauki chcę stworzyć małą mapę 2d za pomocą JS, tablic i obrazków. Problem którego nie potrafię przejść pojawił się przy wgraniu obrazków za pomocą img src metoda ta strasznie muli mi stronę. Na forum znalazłem informację aby wczytać obrazki a później je tylko wywołać więc użyłem var = new Image(); chociaż "użyłem" jest na wyrost ponieważ nie potrafię zrobić aby obrazki się wgrywały a całość działała. Coś przedobrzyłem w linii 29-31 i nie umiem tego przejść. Szukałem rozwiązania na sieci ale tylko pogłębiam mój problem zamiast go szybko rozwiązać. Proszę o pomoc i z góry dziękuję.

index.html

<!DOCTYPE HTML>
<html lang="pl">
<html>
	<head>
		<meta charset="utf-8" />
		<script src="script.js" async></script>
		
	</head>
	<body onload="rysuj()">	
			
		<div id="rezultat"></div>
			
		<input type="submit" value="Lewa" onclick="lewa()" />
		<input type="submit" value="Prawa" onclick="prawa()" />
		<input type="submit" value="Góra" onclick="gora()" />
		<input type="submit" value="Dół" onclick="dol()" />

	</body>
</html>

script.js

	
	var tab = [		
	[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]	,	
	[1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1]	,	
	[1,2,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1]	,	
	[1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1]	,	
	[1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1]	,		
	[1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1]	,	
	[1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1]	,	
	[1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1]	,	
	[1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1]	,		
	[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
	];
	
	var a = new Image();	
	a.src="0.png";
	var b = new Image();	
	b.src="1.png";
	var c= new Image();	
	c.src="2.png";	
	
	function rysuj()
	{
		var rezultat = document.getElementById("rezultat");
	
		for (y = 0; y < 10; y++)
		{
			for (x = 0; x < 20; x++)
			{
				//if (tab[y][x] == 1 ) document.images.rezultat.src=eval("a.src");
				//else if (tab[y][x] == 2 ) document.images.rezultat.src=eval("b.src");
				//else document.images.rezultat.src=eval("c.src");
				
				//if (tab[y][x] == 1 ) rezultat.innerHTML += "<img src=\"0.png\" width=\"20px\" height=\"20px\" />";
				//else if (tab[y][x] == 2 ) rezultat.innerHTML += "<img src=\"1.png\" width=\"20px\" height=\"20px\" />";
				//else rezultat.innerHTML += "<img src=\"2.png\" width=\"20px\" height=\"20px\" />";
			}	
			rezultat.innerHTML += "<br />";	
		}
	}
	
	var yy = 2;
	var xx = 2;
	
	function lewa()
	{
		rezultat.innerHTML = "";
		
		var x2 = xx-1;
		if(tab[yy][x2] == '2')
		{
			tab[yy][xx] = '2';
			xx--;
			tab[yy][xx] = '3';
		}
				
		rysuj();
	}
	
	function prawa()
	{
		rezultat.innerHTML = "";
		
		var x2 = xx+1;
		if(tab[yy][x2] == '2')
		{
			tab[yy][xx] = '2';
			xx++;
			tab[yy][xx] = '3';
		}
				
		rysuj();
	}
	
	function gora()
	{
		rezultat.innerHTML = "";
		
         var y2 = yy-1;
		 if(tab[y2][xx] == '2')
		 {
			 tab[yy][xx] = '2';
			 yy--;
			 tab[yy][xx] = '3';
		 }	
		 
		rysuj();
	}
	
	function dol()
	{
		rezultat.innerHTML = "";
		
         var y2 = yy+1;
		 if(tab[y2][xx] == '2')
		 {
			 tab[yy][xx] = '2';
			 yy++;
			 tab[yy][xx] = '3';
		 }	
		 
		rysuj();
	}

2 odpowiedzi

odpowiedź 5 września 2016 przez Ehlert Ekspert (212,670 p.)
wybrane 5 września 2016 przez Miki

Najlepsza

Nie rób tego na modelu DOM, tylko użyj Canvasa.

komentarz 5 września 2016 przez Miki Bywalec (2,480 p.)
edycja 5 września 2016 przez Miki

Zrobiłem za pomocą Canvas. Efekt idealny. Wielkie dzięki

odpowiedź 5 września 2016 przez Thomas Frost Bywalec (2,540 p.)

Cześć,

Jednym z rozwiązań jest wczytanie obrazków do pewnego kontenera i nadanie mu w CSS:

<code> display: "none" </code>

Można również wczytać obrazki używając AJAX'a.
Z tego co zrozumiałem wczytujesz obrazki w taki sposób, że podmieniasz "src" za pomocą JS'a - to też jest w porządku. Wydaje się, że problemem u Ciebie jest to, że obrazki długo się ładują, a to oznacza, że jest ich dużo oraz mają dość pokaźny rozmiar. Polecam użyć jakiegoś narzędzia do odchudzenia ilości danych (np. odcięcie nagłówka). Pomyśl nad kompresją bezstratną lub stratną. Duża ilość danych musi mieć swój czas na wczytanie się, więc możesz zrobić jakiś pasek ładowania w trakcie wczytywania (np. wczytywać zaraz po załadowaniu się strony).

Pozdrawiam,
Tomek

komentarz 5 września 2016 przez Miki Bywalec (2,480 p.)

Jeżeli chodzi o obrazki to wczytuję naraz całą tablicę czyli z 200 obrazków bo tablica ma 10x20. Później przy każdym ruchu się całość przeładowuje, muszę to chyba zrobić na dwie tablice, żeby podczas ruchu dodatkowo jej nie przeładowywać i wtedy dodać pasek ładowania przy starcie. Obrazki są dość małe bo 20x20 pikseli i w *.png więc już bardziej ich nie zmniejszę

komentarz 5 września 2016 przez Thomas Frost Bywalec (2,540 p.)

Cześć,

Nawet jeśli obrazek jest w formacie "png" nadal można zmniejszyć jego "wagę". Znajdują się w nim zbędne informacje w nagłówku, które można usunąć (robią to odpowiednie programy, nawet online).

Pozdrawiam,
Tomek