Knowledge Base Nr: 00261 ajax3.txt - http://www.swe-kaiser.de
Downloads:
AJAX: Ladezeiten optimieren durch Nachladen großer Bilder nach dem Seitenaufbau
Zuerst werden nur nichtanimierte Bilder geladen, die schnell geladen werden können und beim Starten der Seite sofort richtig angezeigt werden.
Nach dem Aufbau und Anzeigen der Seite durch den Browser werden diese dann durch animierte Bilder ersetzt. Der zeitaufwendige Ladenvorgang beim
Starten wird dadurch vermieden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AJAX Demo 3</title>
<script type="text/javascript" src="zxml.js"></script>
<script type="text/javascript">
function loadImages()
{
changeImage("animgif", "/kaiserreich/images/k_images/anim/familie.gif");
changeImage("animsabine", "/kaiserreich/images/k_images/anim/sabine_schreck.gif");
changeImage("animandreas", "/kaiserreich/images/k_images/anim/k_kinderschreck2.gif");
}
function changeImage(sID, sSrc)
{
var oXmlHttp = zXmlHttp.createRequest();
oXmlHttp.open("get", sSrc, true);
oXmlHttp.onreadystatechange = function ()
{
if (oXmlHttp.readyState == 4)
{
if (oXmlHttp.status == 200)
{
var imageBox = document.getElementById(sID);
imageBox.src = sSrc;
}
}
};
oXmlHttp.send(null);
}
window.onload = function ()
{
if (zXmlHttp.isSupported())
{
loadImages();
}
}
</script>
</head>
<body>
<p>die bilder sollten irgendwann animiert werden!</p>
<img id="animgif" src="/kaiserreich/images/k_images/anim/familie.jpg" width="100" height="100" />
<img id="animsabine" src="/kaiserreich/images/k_images/anim/sabine_schreck.jpg" width="154" height="115" />
<img id="animandreas" src="/kaiserreich/images/k_images/anim/k_kinderschreck2.jpg" width="115" height="154" />
<p>die bilder sollten irgendwann animiert werden!</p>
</body>
</html>