(image)Preloader

[corXy]

Hallo,
ich würde gerne nicht nur einen imagepreloader in meine Startseite einfügen, sondern am besten etwas womit komplette Seiten vorgeladen werden. Da auf diesen Seiten eine menge Bilder sind, wäre das glaube ich die einfachere Variante.
Beim googlen bin ich aber nur auf imagepreloader gestoßen, bei denen man den Pfad zu jedem Bild einzeln angeben muss.
Das es einen Preloader gibt der sich automatisch alle Bilder sucht ist wohl nicht so wahrscheinlich.
Deswegen wäre meine Variante jetzt, einfach ein iframe auf die Startseite zu packen, oder mehrere iframes. In diesen Iframes werden die anderen Seiten (mit den Bildern) schon mal geladen, geht der Besucher dann auf diese Seiten müsste das ja den gleichen effekt haben wie ein normaler Preloader. (auserdem würde es ja auch funktionieren wenn Javascript ausgeschaltet ist)
Geht das so wie ich mir das vorstelle oder gibt es doch eine "schönere" Variante.
Die iframes sind dann natürlich unsichtbar

 

[Cheffchen]

Hallo,

in grunde schon nur das alle Besucher sehr verärgerst und ein einfaches NoGo ist was vor hast.
Sowas macht kein Sinn, wieso möchtest das der User gleich bei der Startseite alle vielleicht schlecht komprimierte Dateien laden muss die vielleicht gesamt sogar 10MB laden soll obwohl er nur 200KB bräuchte.

Sowas hat man vo jahren gemacht noch vor DSL oder LTE, heute macht das kein Sinn und verschreckt nur besucher.

Cheffchen

 

[Tronjer]

Naja, für den stationären DSL-Anschluss mag das egal sein, aber im Hinblick auf die Datentarife von mobile Devices spielen Bandbreite und Übertragungsvolumen schon eine Rolle. Allerdings sind iFrames keine brauchbare Lösung. Es sei denn, man wollte Content von fremden Seiten einbinden.

 

[Timmer]

Eine Seite mit vielen Bildern?

Hast du schonmal an Thumbnails & AJAX gedacht? Damit sparst du Bandbreite & der User muss nur die Bilder in groß laden, die er sich auch anschauen möchte.

Ich benutze gerne eine Kombination aus Thumbnails/AJAX & einer Art Preloader, ich blende einfach die komplette Website aus und zeige einen Spinner, bis alle für die Seite relevanten Scripts und Images geladen wurden. Anschließend switche ich mit $(window).load(function(){}); (jQuery) vom Spinner zur Seite. Alle im Content befindlichen Bilder, welche nicht zur Darstellung der Website unbedingt benötigt werden, lade ich anschließend per AJAX ;)

 

[bodil]

Noch ne schlaue Meinung:
Wenn du die Bilder statt in einen iFrame in ein <div> packst und dieses DIV mit css unsichtbar machst (display: none; visibility:hidden;} hast du den gewünschten Effekt, kannst aber auf die iFrames verzichten. Die wären hier etwas fehl am Platz und lösen das Problem nicht.
Dann werden alle Bilder auch dann geladen, wenn sie gerade nicht sichtbar sind. Ob das sinnvoll ist, solltest du aber unbedingt mal testen, bevor das ganze online geht. Mit Strg + F5 kannst du die Seite unter Umgehung des Caches anzeigen und hast im Prinzip die Bedingungen eines Seitenbesuchers, der das erste mal deine Seite betritt. Zum einen solltest du damit rechnen, dass der Browser sehr lange anzeigt, dass er Inhalte lädt, obwohl sich die dargestellte Seite nicht verändert. Zum anderen solltest du hoffen, dass deine Seitenbenutzer den Cache nicht deaktiviert haben ...
Noch ein Tip: Wenn du das einbaust, dann so, dass du es leicht deaktivieren kannst. Zum Beispiel, wenn du merkst, dass du dein Traffic-Volumen schon Mitte des Monats ausgeschöpft hast oder der Server komplett damit überlastst ist, Bilder auszuliefern, die sich niemand anschaut.

 

[corXy]

...
ich blende einfach die komplette Website aus und zeige einen Spinner, bis alle für die Seite relevanten Scripts und Images geladen wurden. Anschließend switche ich mit $(window).load(function(){}); (jQuery) vom Spinner zur Seite. ...
...

Nach sowas hatte ich auch gesucht wurde aber nicht fündig
Dann haben wir noch das problem, ich habe keine Ahnung von Javascript (ist das überhaupt Javascript oder doch PHP :lol:)

Aber wenn du mir dieses Script zur verfügung stellen würdest, wäre ich dir sehr dankbar und mein Problem ist gelöst :)

 

[bodil]

Nur mal zum Verständnis:
Weil du nicht willst, dass der Besucher beim Laden von Unterseiten auf die Anzeige von Bildern warten muss, willst du ihn auf der Startseite hängen lassen, bis alle Bilder, denen er möglicherweise beim Besuch deiner Seite begegnen könnte, von deinem Server in dessen Cache kopiert sind?

 

[corXy]

Ja hatte ich vor,
aber is wirklich nich so die feine Art.
Die Methode mit dem Spinner anzeigen bis die Seite geladen ist, gefällt mir auch viel besser, aber ich weiß nicht wie ich das machen soll und im Internet finde ich auch nichts dazu.

 

[Timmer]

Benutzt du denn schon jQuery oder ein ähnliches Framework?

Dazu gibt es nämlich kein "fertiges Script", das man einfach einbindet und gut ist ^^ Das hat weitreichendere Folgen, wie z.B. wie möchtest du die Bilder anschließend anzeigen?

 

[corXy]

Ich benutzte nur HTML und CSS
Also nein ^^
Kann man nicht einfach in dem Script sagen das es den Spinner anzeigen soll bis die Seite 100% geladen ist und dann einfach die Seite normal anzeigen lassen?

 

[Cheffchen]

Hallo,

ok die erfahrung muss jeder selber machen das dies in der regel totaler schei... ist.

Ich habe hier gerade das aus meiner alten Seite von 2005 gefunden wo ich das mal zum test drin hate.
im header

<script type="text/javascript><!--
function clearPreloadPage() { //DOM
if (document.getElementById){
document.getElementById('prepage').style.visibility='hidden';
}else{
if (document.layers){ //NS4
document.prepage.visibility = 'hidden';
}
else { //IE4
document.all.prepage.style.visibility = 'hidden';
}
}
}
--></script>

body tag erweitern

<BODY onLoad="clearPreloadPage();">

und das wird dann angezeigt, also gleich nach dem body einfügen und anpassen

<div id="prepage" style="position:absolute;border: solid 2px; border-color:#8296B0; font-family:Verdana; font-size:16px; left:40%; top:60%; height:20px; width:250px;">
<table width="100%" style="background-image:url(bilder/load-bg.png);"><tr><td><div align="center">Seite wird geladen...<br><br><img src="bilder/loading.gif" alt="loading"></div></td></tr></table>
</div>

Dies ist nicht die beste möglichkeit aber sehr einfach und bis zu erkenntnis das wieder raus machst reicht das, wenn es überhaupt noch funktioniert :O)

Cheffchen

 

[corXy]

Scheint nicht wirklich zu funktionieren.
Und so wie ich das sehe wird, so lange die Seite geladen wird, nichts angezeigt auser "Seite wird geladen...", oder?
Dann glaube, habe ich mich auch falsch ausgedrückt.
Eigentlich geht es ja nur um ein div element, das nicht angezeigt werden soll, solange die Seite geladen wird. Also man sollte schon noch die Navigationsleiste sehen.
Aber ich glaub ich lass es wohl doch, auf euer empfeheln ^^
Dann muss ich halt gucken das die Bilder schön klein sind und der Benutzter muss sich halt das unschöne Aufbauen der Seite betrachten =D