Frank
Neues Mitglied
Hi Community,
Ich habe nun für eine Seite ein relativ großes Design geschrieben.
Groß in dem Sinne, dass viel geladen werden muss (ca. 57 Bilder).
Also habe ich mich daran gemacht einen JavaScript Preloader gebastelt, der über Ajax funktioniert.
Der preloader sieht gut aus (www.ts-onlyfree.de), doch wenn ich meinen Cache leere, der Preloader durch ist, und dann die Seite geladen wird, muss trotzdem noch 'lange' auf das laden der Bilder gewartet werden.
Ich gehe also davon aus, dass der Preloader nicht die bilder in den Cache 'schreibt'. Anscheinend habe ich bei dem Konzept einen grundlegenden Fehler.
Ich würde mich daher über alle Ansätze für das Problem (oder noch besser die Lösung;)) freuen.
Der Preloader:
Der Preloader besteht aus 2 Dateien
Der Preloader an sich:
Und die PHP Datei im Hintergrund
Ich habe nun für eine Seite ein relativ großes Design geschrieben.
Groß in dem Sinne, dass viel geladen werden muss (ca. 57 Bilder).
Also habe ich mich daran gemacht einen JavaScript Preloader gebastelt, der über Ajax funktioniert.
Der preloader sieht gut aus (www.ts-onlyfree.de), doch wenn ich meinen Cache leere, der Preloader durch ist, und dann die Seite geladen wird, muss trotzdem noch 'lange' auf das laden der Bilder gewartet werden.
Ich gehe also davon aus, dass der Preloader nicht die bilder in den Cache 'schreibt'. Anscheinend habe ich bei dem Konzept einen grundlegenden Fehler.
Ich würde mich daher über alle Ansätze für das Problem (oder noch besser die Lösung;)) freuen.
Der Preloader:
Der Preloader besteht aus 2 Dateien
Der Preloader an sich:
PHP:
<?php
error_reporting(E_ALL);
session_start();
include("include/mysql.php");
include("include/mailer.php");
include("include/timediff.php");
include("include/serverinfo.php");
include("include/bbcode.php");
include("include/generator.php");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Teamspeak 2 Free Hoster || lizensiert</title>
<meta name="author" content="Frank Zechert">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="language" content="de">
<meta name="copyright" content="Inhaber">
<meta name="revisit" content="2 weeks">
<meta name="revisit-after" content="10 days">
<meta name="robots" content="all">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="de">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" href="styles/design.css">
<link rel="stylesheet" href="styles/elements.css">
<link rel="stylesheet" href="styles/text.css">
<script type="text/javascript">
//globale Instanz von XMLHttpRequest
var xmlHttp = false;
var bilder = new Array();
//XMLHttpRequest-Instanz erstellen
//... für Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xmlHttp = false;
}
}
//... für Mozilla, Opera, Safari usw.
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
<?php
$fh = opendir("./images");
$verzeichnisinhalt = array();
$i = 0;
while (true == ($file = readdir($fh)))
{
if ((substr(strtolower($file), -3)=="jpg") or (substr(strtolower($file), -3)=="gif") or (substr(strtolower($file), -3)=="png"))
{
?>
bilder[<?php echo $i; ?>] = '.images/<?php echo $file; ?>'
<?php
$i++;
}
}
closedir($fh);
?>
var anzahl = bilder.length;
function loadData(url,c)
{
if (xmlHttp)
{
xmlHttp.open('GET', 'loadimage.php?id=' + c + '&url=' + url, true);
xmlHttp.onreadystatechange = answere;
xmlHttp.send(null);
}
}
function startload(c)
{
loadData(bilder[c],(c+1))
}
function answere()
{
if (xmlHttp.readyState == 4)
{
var idpart = xmlHttp.responseText.split("|");
var id = parseFloat(idpart[0])
anzahl = parseFloat(anzahl)
var status = id*100/anzahl
status = status.toFixed(2)
document.getElementById("fortschritt").innerHTML = status + "%";
if(id < anzahl)
startload(id)
else
document.location.href="index.php?pageid=news"
}
}
</script>
</head>
<body onLoad="startload(0)">
<table cellpadding="0" cellspacing="0" id="aussen">
<tr>
<td id="oben_links"> </td>
<td id="oben"> </td>
<td id="oben_rechts"> </td>
</tr>
<tr>
<td id="links"> </td>
<td id="mitte">
<div align="center">Seite wird vorgeladen...</div>
<div> </div>
<div align="center"><img src="http://www.html.de/images/5219progress_orange_load.gif" width="133" height="16" border="0" alt=""></div>
<div> </div>
<div align="center">Fortschritt: <span id="fortschritt">0%</span></div>
<div> </div>
<div> </div>
<div> </div>
<div align="center" class="small">Sollte die automatisch Weiterleitung nicht funktionieren, klicken Sie bitte
<a href="index.php?pageid=news">hier</a></div>
</td>
<td id="rechts"> </td>
</tr>
<tr>
<td id="unten_links"> </td>
<td id="unten"> </td>
<td id="unten_rechts"> </td>
</tr>
</table>
</body>
</html>Und die PHP Datei im Hintergrund
PHP:
<?php
$url = $_GET["url"];
$id = $_GET["id"];
echo $id;
?>
|
<img src="<?php echo $url; ?>" border="0" alt="">
