✔ Bild im Serverresponse vorladen

[Unique86]

Hallo zusammen,

ich hoffe der Titel ist aussagekräftig.
Also ich verzweifele an folgendem Problem.

Ich habe eine Kartenansicht, die ich bei bedarf neu Laden kann hierzu gibt es die Funktion "reloadMap()".

function reloadMap()
{
    if(xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
    {
        document.getElementById("theMap").style.backgroundImage = 'url(images/loading.gif)';
		
        xmlHttp.open("POST", "dispatcher?page=map", true);
        xmlHttp.onreadystatechange = handleServerResponse;
        xmlHttp.send(null);
    }
}

Kurze Erklärung dazu ...
Das Element "theMap" ist ein <img /> und bekommt bei dieser Aktion einen Ladebalken als Hintergrund. Mein Dispatcher ist ein Servlet (das spielt aber jetzt erstmal keine Rolle) und handleServerResponse ist eine weitere, von mir implementierte Funktion die wiefolgt aufgebaut ist.

function handleServerResponse()
{
    if(xmlHttp.readyState == 4)
    {
        if(xmlHttp.status == 200)
        {
             xmlResponse = xmlHttp.responseText;
             // Hier kommt das Problem
	}
    } 
    else 
    {
        alert("There was a problem accessing the server.");
    }    
}

Letzendlich überprüfe ich den Status und hole mir den xmlPresponse (in meinem Fall eine einfache URL zu einem Bild).
Jetzt kommt an dieser Stelle genau mein Problem.
Ich möchte das Bild an dieser Stelle erstmal vorladen bevor ich es danach als Hintergrundbild des <img /> (siehe oben) setze.

Ich weiß nicht wie ich das realisieren soll...

Hoffe mein Anliegen ist verständlich...

Gruß Sven

 

[Chumper]

Du kannst Bilder doch mit Javascript vorladen.
Also so:

bild = new image;
bild.src = "pfad";

dann würdest du veranlassen, dass das Bild geladen wird ohne es anzuzeigen.
Nun musst du nur nach 3 oder 5 oder was weiß ich Sekunden das Bild anzeigen.

 

[Unique86]

Hallo,

erstmal vielen Dank für die Antwort.

Genau hier setzt das Problem ein ...

function handleServerResponse()
{
	if(xmlHttp.readyState == 4)
	{
		if(xmlHttp.status == 200)
		{
			xmlResponse = xmlHttp.responseText;
			
			imageToPreload = new Image();
			imageToPreload.src = 'http://'+xmlResponse;
			
			if(imageToPreload.complete == true)
			{
				document.getElementById("theMap").style.backgroundImage = 'url('+imageToPreload.src+')';
			}
		} 
		else 
		{
			alert("There was a problem accessing the server.");
		}
	}
}

Wenn ich das so lasse, wird mir die im Response befindliche URL niemals angezeigt weil das Vorladen des Bildes etwas Zeit in Anspruch nimmt. Wie kann ich also quasi auf das Bild "warten" ?

Gruß Sven

 

[Chumper]

function handleServerResponse()
{
	if(xmlHttp.readyState == 4)
	{
		if(xmlHttp.status == 200)
		{
			xmlResponse = xmlHttp.responseText;
			
			imageToPreload = new Image();
			imageToPreload.src = 'http://'+xmlResponse;
			
			if(imageToPreload.complete == true)
			{
                                                setTimeout('document.getElementById("theMap").style.backgroundImage = "url("+imageToPreload.src+")";', 3000);
				
			}
		} 
		else 
		{
			alert("There was a problem accessing the server.");
		}
	}
}

Versuchs mal damit, damit wartet Javascript 3 sek. bis er das Bild zuweist.

 

[Sven Mintel]

Moin,

die complete-Eigenschaft abzufragen dürfte wenig erfolgversprechend sein, denn sie müsste genau in dem Moment true sein, wenn sie abgefragt wird....abgefragt wird aber sofort nach dem Beginn des Ladens, als im Millisekunden bereich danach, wo die Grafik nicht complete sein dürfte.

Stattdessen könntest du das Ganze über den onload-Event von imageToPreload anstossen...dieser feuert, sobald das Bild geladen ist.

 

[Unique86]

Hallo,

erstmal danke für Deine Antwort.
Ich weiß nicht ob ich das richtig verstehe aber ich habe es jetzt so gemacht und es verspricht keine Verbesserung ...

var imageToPreload = new Image();

function handleServerResponse()
{
	if(xmlHttp.readyState == 4)
	{
		if(xmlHttp.status == 200)
		{
			xmlResponse = xmlHttp.responseText;
			imageToPreload.src = 'http://'+xmlResponse;
			imageToPreload.onLoad=setImage();
		} 
		else 
		{
			alert("There was a problem accessing the server.");
		}
	}
}

function setImage()
{
	document.getElementById("theMap").style.backgroundImage = 'url('+imageToPreload.src+')';
}

Oder denke ich da falsch ?

Gruß Sven

 

[Sven Mintel]

Fast richtig

So sollte es klappen:

var imageToPreload = new Image();
imageToPreload.onload=setImage;//Funktionsname bei Eventüberwachung ohne Klammern notieren

function handleServerResponse()
{
	if(xmlHttp.readyState == 4)
	{
		if(xmlHttp.status == 200)
		{
			xmlResponse = xmlHttp.responseText;
			imageToPreload.src = 'http://'+xmlResponse;
			
		} 
		else 
		{
			alert("There was a problem accessing the server.");
		}
	}
}

function setImage()
{
	document.getElementById("theMap").style.backgroundImage = 'url('+imageToPreload.src+')';
}

 

[Unique86]

Hallo Sven,

leider nein ... so funktioniert das nicht
Er zeigt mir jetzt garkein Bild mehr an ...

Ich hab mal den kompletten Source dabei gepackt ...

var xmlHttp = createXmlHttpRequestObject();
var imageToPreload = new Image();
imageToPreload.onLoad=setImage;

function createXmlHttpRequestObject()
{
	var xmlHttp = false;

	try
	{
		// Browser: Mozilla, Opera, Safari etc.
    	xmlHttp = new XMLHttpRequest();
    }
    catch (ex)
    {
    	try
    	{
    		// IE < 6
        	xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (ex)
        {
        	try
        	{
        		// IE >= 6
            	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            catch (ex)
            {
            	xmlHttp = false;
            }
        }
    } 
	
	return xmlHttp;
}

function showMap()
{
	// 0 - uninitialized
	// 1 - loading
	// 2 - loaded
	// 3 - interactice
	// 4 - complete
	if(xmlHttp == false)
	{
		alert("Error creating the XMLHttpRequest object.");
	}
	else
	{
		if(xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
		{
			document.getElementById("theMap").style.backgroundImage = 'url(images/loading.gif)';
			xmlHttp.open("POST", "dispatcher?page=map", true);
			xmlHttp.onreadystatechange = handleServerResponse;
			xmlHttp.send(null);
		}
	}
}

function handleServerResponse()
{
	if(xmlHttp.readyState == 4)
	{
		if(xmlHttp.status == 200)
		{	
			xmlResponse = xmlHttp.responseText;
			imageToPreload.src = 'http://'+xmlResponse;
		} 
		else 
		{
			alert("There was a problem accessing the server.");
		}
	}
}

function setImage()
{
s	document.getElementById("theMap").style.backgroundImage = 'url('+imageToPreload.src+')';
}

 

[Sven Mintel]

Wenn das so dein Code ist, hat sich dort ein s in setImage() verirrt

function setImage()
{
s	document.getElementById("theMap").style.backgroundImage = 'url('+imageToPreload.src+')';
^
}

 

[Unique86]

Wenn das so dein Code ist, hat sich dort ein s in setImage() verirrt

function setImage()
{
s	document.getElementById("theMap").style.backgroundImage = 'url('+imageToPreload.src+')';
^
}

danke, ändert aber leider nichts an der Thematik