Erst Grafiken vorladen und dann automatisch weiterleiten

querschlaeger

Haudegen

Dabei seit: 09.11.2002

Beiträge: 576

1

Montag, 10. Februar 2003, 02:21

Hallo,

ich möchte gerne eine Startseite erstellen, in der unsichtbar einige Grafiken "vorladen" sollen und nachdem sie geladen sind und im Cache des Browsers sind, soll eine Weiterleitung zu einer weiteren Seite erfolgen, wo die Dateien nur noch aus dem Cache geladen werden.

Wie lässt sich das realisieren?

Ich möchte dieses "tunneln" aber ohne Scripte (JavaScript, JScript, VBSript, ...) oder irgendwelche anderen browserabhängigen Funktionen erreichen. Es soll ja schließlich jeder - unabhägig von Browser und Einstellungen - dieses Precaching "erfahren".

Mit wäre es daher recht, wenn es mit HTML-Codes bzw. serverseitigen Möglichkeiten (z.B. SSI, PHP, ...) realisierbar wäre.

Eine Umleitung ist im <head>-Bereich eines HTML-Dokuments erreichbar über:

	Quellcode
1	<meta http-equiv="refresh" content="0; url=http://www.domain.de/index.html">

Und das Vorladen eines Bildes könnte ich erreichen mit:

	Quellcode
1	<img scr="bild.jpg" width="1" height=1 style="visibility:hidden">

Aber wie erreiche ich, dass erst dann eine Weiterleitung erfolgt, wenn alle Bilder vollständig geladen wurden (ich meine ohne die Zeit im <meta>-Tag auf einen ungefähren Wert zu stellen - das ist mir zu ungenau)?

mfg querschlaeger

Die Plattform für Pharmazeuten
(Blogtest: Pharma-Blog)

passing

Tripel-As

Dabei seit: 29.09.2002

Beiträge: 245

2

Montag, 10. Februar 2003, 08:59

RE: Erst Grafiken vorladen und dann automatisch weiterleiten

Also eine richtige Lösung hab ich leider auch nicht. (Höchstens das mit dem ungefähren Wert im meta-Tag.)

Aber mich interessiert mal, warum du das genau so machen willst? Warum erst alles vorladen? Das kostet doch nur Zeit für den Surfer und hält ihn eher von deiner Seite fern, wenn da erstmal 10 Sekunden lang gar nichts erscheint.

http://www.passing.de

zerobencool

unregistriert

3

Montag, 10. Februar 2003, 11:46

hallo

hier ein java preloader musst aber oben deine images noch anpassen

Quellcode

<html>

<head>

<title>test</title>
<script language="JavaScript1.2">
<!-- begin hiding


startingColor = new Array() // <-- Do not modify!
endingColor = new Array() // <-- Do not modify!

// YOU MAY MODIFY THE FOLLOWING:
var yourImages = new Array("images/schock.gif","images/zunge.gif","images/gott.gif","images/daum.gif","images/cool.gif","images/bose.gif","images/button.gif","images/button_s.gif","images/button_s-over.gif","images/button-over.gif","images/dna_01.gif","images/dna_02.gif","images/dna_04.gif","images/dna_05.gif")
var locationAfterPreload = "index.php" // The script will redirect here when the preloading finishes *successfully*
var preloadbarWidth = 250 // The length of the preload bar. Should be greater than total amount of images you want to preload!
var preloadbarHeight = 15 // The height of the gradient/preload bar
var backgroundOfGradient = "#57758B" // Default color while the preload bar is "filling up"

// Color the preloadbar is starting with - enter 1st, 3rd and 5th numbers/letters of color code
startingColor[0] = "6"
startingColor[1] = "9"
startingColor[2] = "C"

// Color the preloadbar is going to end up with - enter the 1st, 3rd and 5th numbers/letters of color code
endingColor[0] = "3"
endingColor[1] = "6"
endingColor[2] = "9"

// FOR TROUBLESHOOTING:
var gap = 4 // PLAY AROUND WITH THIS SETTING IF YOU GET A JAVASCRIPT ERROR!!! 2 is the minumum value!!!


// DO NOT MODIFY ANYTHING BEYOND THIS POINT!!!

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[i] = startingColor[i].toLowerCase();
endingColor[i] = endingColor[i].toLowerCase();
startingColor[i] = eval(startingColor[i]);
endingColor[i] = eval(endingColor[i]);
diff[i] = (endingColor[i]-startingColor[i])/num;
ones[i] = Math.floor(diff[i]);
sixteens[i] = Math.round((diff[i] - ones[i])*15);
}
endingColor[0] = 0;
endingColor[1] = 2;
endingColor[2] = 1;
i = 0, j = 0;
while (i <= num) {
hilite[i] = "#";
while (j < 3) {
hilite[i] += convert[startingColor[j]];
hilite[i] += 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[i] = new Image();
preImages[i].src = yourImages[i];
loaded[i] = 0;
cover[i] = 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[i] && preImages[i].complete) {
loaded[i] = 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 = "Lädt " + currCount + " von " + imgLen + " Bildern [" + percent + "%].";
pending--;
checkLoad();
return;
}
eval("document.all.cell" + (h+1) + ".style.backgroundColor = hilite[h]");;
h++;
setTimeout("changeto()",1);
}
defaultStatus = "Lädt 0 von " + imgLen + " Bildern [0%]."
// end hiding -->
</script>    
</head>

<body text="#000000" bgcolor="#FFFFFF" link="#000000" vlink="#000000" alink="#000000">
<p align="center">Willkommen auf PHPCommunity.net</p>
<p align="center">Seite wird geladen .... Bitte Warten
<script language="JavaScript1.2">
<!-- beging hiding
document.write('<table border="1" bordercolor="133128" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">');
for (i = 0; i < num; i++) {
document.write('<td width="' + gap + '" id="cell' + (i+1) + '"></td>');
}
document.write('</tr></table>');
document.write('<p><small><a href="javascript:location.replace(locationAfterPreload)"></a></small></p></font>')
loadImages();
// end hiding -->
</script>

</p>

</body>

</html>

querschlaeger

Haudegen

Dabei seit: 09.11.2002

Beiträge: 576

4

Dienstag, 11. Februar 2003, 00:30

Erst Grafiken vorladen und dann automatisch weiterleiten

@zerobencool:

Hm..., das mit den Balken sieht echt cool aus, zumindest im Internet Explorer. Mozilla (ja, JavaScript ist aktiviert) macht da nur 'ne Weiterleitung - ohne den Ladebalken und das Precaching. Da muss irgendwo ein Fehler im Script sein, denn Mozilla interpretiert Quelltext nur, wenn der Quelltext 100% i.O. ist (der kennt keine Fehlertoleranz).

Aber eigentlich wollte ich ja keine Scripte einsetzen, denn nicht jeder hat Scripte im Browser aktiviert (ich ja eigentlich auch nicht - nur halt manchmal zu Testzwecken (wenn eine Seite im Netz unbedingt Scripte zur korrekten Funktionsweise erfordert, heißt es für mich nur noch: "Diese Seite in Zukunft meiden - mit Scripten kann man zuviel böse Hindergedanken haben")).

@Matt:

Hä? Sorry, aber das ist doch mein Code aus der Frage, oder? Damit kann ich jetzt leider nicht viel anfangen (oder soll ich es etwas in dieser Reihenfolge schreiben - aber wohin dann im Dokument (<head> oder <body>))?

mfg querschlaeger

Die Plattform für Pharmazeuten
(Blogtest: Pharma-Blog)

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »querschlaeger« (11. Februar 2003, 00:32)

Athlonfreak

Doppel-As

Dabei seit: 16.02.2003

Beiträge: 149

5

Sonntag, 16. Februar 2003, 18:52

Ich hab so ein ähnliches Script auf meiner HP. nur so abgeändert das noch die auflösung gewählt wird.
Siehe: http://www.athlonfreak.tk

MfG Athlon

Besucht mal mein Handy und Computermoddingboard & Homepage:
http://www.athlonfreaksboard.tk
http://www.athlonfreak.tk

covermaker

unregistriert

6

Montag, 17. Februar 2003, 14:15

RE: Erst Grafiken vorladen und dann automatisch weiterleiten

hey super sache danke euch allen

painclan

Tripel-As

Dabei seit: 01.11.2002

Beiträge: 193

7

Samstag, 26. April 2003, 12:20

helft mir büüdde..
habe dieses java script auf meiner hp eingebaut, aber vor meinem redesign hat es geklappt... aber jetzt läd er immer das letzte bild nicht mehr....

www.casestyling.de.vu schaut es euch an, und sagt mir, was ich falsch mache..

Dimitri

König

Dabei seit: 16.01.2003

Beiträge: 761

8

Samstag, 26. April 2003, 22:53

Hab denke ich ne Lösung! Funzt mit nem winzig kleinen js

Man schreibt einfach alle Bilder zum Vorladen mit width und height auf 1 und nem alpha filter auf 100% in den quellcode. Dann setzt man in den BODY tag einfach onload="self.location='http://blabla.htm'"

http://www.FireflySeason2.com
Sie wird wieder fliegen!!

painclan

Tripel-As

Dabei seit: 01.11.2002

Beiträge: 193

9

Samstag, 26. April 2003, 23:00

wäre ne möglichkeit...
aber naja... will aber mit status und so..
hab es als dummer noob sogar geschafft...
funzt jetzt alles...

mat

Routinier

Dabei seit: 05.12.2002

Beiträge: 383

10

Sonntag, 27. April 2003, 10:05

Du kannst aber auch Flash verwenden und damit die Grafiken vorladen. Flash gibt es so gut wie für alle Systeme und wird von allen Browsern unterstützt. Ein Status kann man damit auch leicht machen.

Lev

Tripel-As

Dabei seit: 06.03.2003

Beiträge: 236

11

Sonntag, 27. April 2003, 15:03

Danke auch!...

Servus an alle,
Da ich mir den Script in meine Homepage auch eingebaut habe und es mir echt stark gefällt,
bedanke ich mich bei zarobencool.
http://www.levdesign.de.vu

cs 1.6 surfing !

Erst Grafiken vorladen und dann automatisch weiterleiten

Quellcode

Quellcode

RE: Erst Grafiken vorladen und dann automatisch weiterleiten

Quellcode

Erst Grafiken vorladen und dann automatisch weiterleiten

RE: Erst Grafiken vorladen und dann automatisch weiterleiten

Danke auch!...

Ähnliche Themen