Toggle sidebar

Preloader für Website

  • Ab sofort steht euch hier im Forum die neue Add-on Verwaltung zur Verfügung – eine zentrale Plattform für alles rund um Erweiterungen und Add-ons für den DSM.

    Damit haben wir einen Ort, an dem Lösungen von Nutzern mit der Community geteilt werden können. Über die Team Funktion können Projekte auch gemeinsam gepflegt werden.

    Was die Add-on Verwaltung kann und wie es funktioniert findet Ihr hier

    Hier geht es zu den Add-ons

Status
Für weitere Antworten geschlossen.
R

Rabbit_1

Benutzer
Registriert
11. Juli 2010
Beiträge
134
Reaktionspunkte
0
Punkte
16
Hallo,

ich bastele gerade an einer Fotogalerie die natürlich auf der Synology liegt :) und die auch schon komplett fertig ist, das Galeriegrundgerüst ist mit Visual Lightbox erstellt worden und ich habe mit meinem Halbwissen dann die Optik angepasst ;)Das Problem ist, dass die Seite mit über 450 Fotos (thumbnails) mehrere Sekunden braucht, um komplett geladen zu werden.
Ich möchte jetzt, dass die Seite erst zum Vorschein kommt, wenn die Seite im Hintergrund komplett geladen ist und man vorher ein "Bitte warten" oder ein Animiertes gif zu sehen bekommt.

Das beste Ergebnis, das ich mit copy und paste aus dem Internet hinbekommen habe :tongue: , ist mit dem folgenden java script, das mit dem Internetexplorer auch funktioniert, nur nicht mit den anderen wie Firefox oder chrome.
Das script ist schon älter und deswegen werden anscheinend die genannten Browser nicht unterstützt, hier mal die Index.php mit dem script.

Vielleicht kann mir ja da jemand helfen und es so abändern, dass man es benutzen kann ;)
Code: 
<html>
<head>

<script type="text/javascript" language="JavaScript">
<!-- Original:  Gilbert Davis -->
<!-- Begin
function LadeInfo() 
{
if (document.getElementById) 
	{  
	// DOM3 = IE5, NS6
	document.getElementById('hidepage').style.visibility = 'hidden';
	}
else 
	{
	if (document.layers) 
		{  
		// Netscape 4
		document.hidepage.visibility = 'hidden';
		}
	else 
		{  
		// IE 4
		document.all.hidepage.style.visibility = 'hidden';
      		}
   	}
}
//  End -->
</script>


################### Seiten Headerinhalt ##############  

		
</head>

<body OnLoad="LadeInfo()"> 
<!-- PRELOADER --> 
<div id="hidepage" 
style="position: absolute; 
left:0px; 
top:0px; 
background-color: #FFFFFF; 
layer-background-color: #FFFFFF; 
height: 100%; 
width: 100%;"> 
<table height="100%" width="100%" align="center"> 
<tr><td valign="middle" align="center">

<div id="loader"><img src="laufen.gif" border="0"/></div>
<br><br>Seite wird geladen ... gleich gehts weiter<br>
 
</td></tr></table> 
</div> 
<!-- ENDE PRELOADER -->



<body style="background-image:url(hintergrund.jpg);">


################### Seiten Bodyinhalt ################

</body>
</html>
 
wo und wie rufst die Funktion 'LadeInfo()' auf?

Itari
 
Wir doch hier gemacht oder ?

HTML: 
<body OnLoad="LadeInfo()"> 
<!-- PRELOADER --> 
<div id="hidepage" 
style="position: absolute; 
left:0px; 
top:0px; 
background-color: #FFFFFF; 
layer-background-color: #FFFFFF; 
height: 100%; 
width: 100%;"> 
<table height="100%" width="100%" align="center"> 
<tr><td valign="middle" align="center">

<div id="loader"><img src="laufen.gif" border="0"/></div>
<br><br>Seite wird geladen ... gleich gehts weiter<br>
 
</td></tr></table> 
</div> 
<!-- ENDE PRELOADER -->

Ich habe das wie gesagt aus dem Internet per copy und paste eingefügt und es funktioniert ja auch per Internetexplorer.
Nur nicht die anderen Browser, wie ich das sehe, liegt das ander if anweisung
HTML: 
if (document.getElementById) 
	{  
	// DOM3 = IE5, NS6
	document.getElementById('hidepage').style.visibility = 'hidden';
	}
else 
	{
	if (document.layers) 
		{  
		// Netscape 4
		document.hidepage.visibility = 'hidden';
		}
	else 
		{  
		// IE 4
		document.all.hidepage.style.visibility = 'hidden';
      		}
   	}
Da sind ja die heute aktuellen Browser ja garnicht aufgeführt und ich habe auch keine Ahnung ob man das anpassen kann der ob man was anderes nimmt :o
 
sorry, ich hatte nicht gescrollt ...

Itari
 
irgendwie irritiert mich, dass du zweimal das Tag '<body>' verwendet hast ... soll das funktionieren?

Itari
 
Ich habe jetzt hier http://www.psd-tutorials.de/tutorials/web/adobe-dreamweaver/-/view/504--preloading-image was anderes gefunden.
Kann mir einer erklären was man da genau ändern müßte um es in eine Website zu integrieren?
Und was mir nicht ganz einleuchtet ob das nur aus dem Code hier besteht oder ob da eigentlich noch zwei css Dateien dabei sein müßten :confused:
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="main.css">
<SCRIPT language=JavaScript1.2>
startingColor = new Array()
endingColor = new Array() var yourImages = new Array
("images/bild.gif",")
var locationAfterPreload = "index.php"
var preloadbarWidth = 200
var preloadbarHeight = 10
var backgroundOfGradient = "#ffffff"startingColor[0] = "0"
startingColor[1] = "0"
startingColor[2] = "0"endingColor[0] = "0"
endingColor[1] = "0"
endingColor[2] = "0"var gap = 3
if (!document.all) location.replace(locationAfterPreload)
var a = 10, b = 11, c = 12, d = 13, e = 14, f=15, i, j, ones = new Array(), sixteens = new Array(), diff = new Array();
var convert = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"), imgLen = yourImages.length;
var loaded = new Array(), preImages = new Array(), currCount = 0, pending = 0, h = 0, hilite = new Array(), cover = new Array();
var num = Math.floor(preloadbarWidth/gap);
for (i = 0; i < 3; i++) {
startingColor = startingColor.toLowerCase();
endingColor = endingColor.toLowerCase();
startingColor = eval(startingColor);
endingColor = eval(endingColor);
diff = (endingColor-startingColor)/num;
ones = Math.floor(diff);
sixteens = Math.round((diff - ones)*15);
}
endingColor[0] = 0;
endingColor[1] = 0;
endingColor[2] = 0;
i = 0, j = 0;
while (i <= num) {
hilite = "#";
while (j < 3) {
hilite += convert[startingColor[j]];
hilite += convert[endingColor[j]];
startingColor[j] += ones[j];
endingColor[j] += sixteens[j];
if (endingColor[j] > 15) {
endingColor[j] -= 15;
startingColor[j]++;
}
j++;
}
j = 0;
i++;
}
function loadImages() {
for (i = 0; i < imgLen; i++) {
preImages = new Image();
preImages.src = yourImages;
loaded = 0;
cover = Math.floor(num/imgLen)*(i+1)
}
cover[cover.length-1] += num%imgLen
checkLoad();
}
function checkLoad() {
if (pending) { changeto(); return }
if (currCount == imgLen) { location.replace(locationAfterPreload); return }
for (i = 0; i < imgLen; i++) {
if (!loaded && preImages.complete) {
loaded = 1; pending++; currCount++;
checkLoad();
return;
}
}
setTimeout("checkLoad()",10);
}
function changeto() {
if (h+1 > cover[currCount-1]) {
var percent = Math.round(100/imgLen)*currCount;
if (percent > 100) while (percent != 100) percent--;
if (currCount == imgLen && percent < 100) percent = 100;
defaultStatus = "Loaded " + currCount + " out of " + imgLen + " images [" + percent + "%].";
pending--;
checkLoad();
return;
}
eval("document.all.cell" + (h+1) + ".style.backgroundColor = hilite[h]");;
h++;
setTimeout("changeto()",1);
}
defaultStatus = "Loaded 0 out of " + imgLen + " images [0%]."
// end hiding -->
</SCRIPT>
<style type="text/css">
<!--
.Stil1 {color: #CCCCCC}
.Stil2 {color: #FFFFFF}
-->
</style>
</HEAD>
<body link="#000000" vlink="#000000" alink="#000000" text="#000000" bgcolor="#373737" topmargin="0" leftmargin="0">
<TABLE height="100%" width="100%">
<TBODY>
<TR>
<TD>
<CENTER>
<p><span class="Stil1">Preloading Images</span><BR>
<SCRIPT language=JavaScript1.2>
<!-- beging hiding
document.write('<table border="1" bordercolor="#485266" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">');
for (i = 0; i < num; i++) {
document.write('<td bordercolorlight="75A0BD" bordercolordark="75A0BD" width="' + gap + '" id="cell' + (i+1) + '"></td>');
}
document.write('</tr></table>');
loadImages();
// end hiding -->
</SCRIPT>
<A href="index.php" class="Stil2">skip</A>
</p>
</CENTER></TD></TR></TBODY></TABLE></BODY></HTML>
Zum Vergrößern anklicken....
 
Status
Für weitere Antworten geschlossen.
NAS-Central - Ihr Partner für NAS Lösungen
NAS-Central - The Home of NAS
 

Kaffeautomat

Wenn du das Forum hilfreich findest oder uns unterstützen möchtest, dann gib uns doch einfach einen Kaffee aus.

Als Dankeschön schalten wir deinen Account werbefrei.

:coffee:

Hier gehts zum Kaffeeautomat 

Hosted by netcup
IT Lösungen mit NAS Servern
IT Firma Trier
Fotograf Trier
   
Oben Unten