Bilder preloaden mit jQuery

[freakgesicht]

Hallo Forum!

Ich habe eine Hauptseite, in der ich per jQuery Unterseiten in einen DIV namens "page" lade. Eigentlich dachte ich, dass ich die Unterseite folgendermaßen preloaden kann:

In der Funktion, die die Unterseite lädt, steht folgendes:

function loadpage()
{
  $('page').empty.html('<preloadercode>');
  $('page').load('page.php');
}

Diese Funktion wird immer aufgerufen, wenn man einen anderen Menüpunkt anwählt, also href="javascript:loadpage('produkte');".

Dachte, dass der div "page" so lange empty ist und somit den <preloadercode> enthält, bis die Seite per load() geladen wurde. Tja, war wohl ein Fehler - habe erst mit jQuery begonnen. Wenn ich die Unterseite (sind alles php-Seiten) am Anfang mit dem Befehl "sleep(2)" versehe, funktioniert der Preloader lokal schon, aber anscheinend berücksichtigt das nicht die Bilder.

Ich brauche eigentlich nichts besonderes. Meine Unterseiten sind oft aus vielen einzelnen Bildelementen aufgebaut, weshalb ich einfach nur ein Ladesymbol so lange anzeigen will, bis die Unterseite inklusive Bildern geladen ist.
Ist das zu lösen?

Danke!

[Kropff]

Probier mal das. Bau im Header das hier ein (Pseudocode):

$('page').empty.html('<preloadercode>');
window.onload = function () {
  $('page').load('page.php');
}

So in etwa sollte das funktionieren. Hoffe ich zumindest. Bin nicht so der jQuery-Experte.

Gruß
Peter

[freakgesicht]

Hallo Kropff,

erstmal danke für deine Antwort!

Leider funktioniert der Code nicht. Die Funktion steht so wie ich sie in meinem ersten Beitrag geschrieben habe in einer externen Javascript-Datei, also ohne document.ready - aber das sollte ja nicht nötig sein, oder?

Wenn ich meine Funktion nach deinem Vorschlag ändere, wird meine Unterseite gar nicht mehr geladen

Hast du vielleicht noch eine andere Idee? Oder jemand anderer?

P.S. Kropff, deine Tutorialseite ist übrigens spitze - habe sie mir mal reingezogen, um Grundlagen zu wiederholen! Cool!

[wahsaga]

Meine Unterseiten sind oft aus vielen einzelnen Bildelementen aufgebaut

Klingt so, also ob das das Hauptproblem ist, an dem du arbeiten solltest.

Sofern es sich nur um Verzierungen und nicht um tatsächlichen Inhalt handelt, gehören sie natürlich als Hintergrundbilder ins CSS – und da kann man dann bspw. oftmals gut die Sprite-Technik nutzen, um die Ladezeit zu reduzieren.

[freakgesicht]

@wahsaga

Danke für deine Antwort! Tja, das hätte ich gerne getan, allerdings handelt es sich bei diesen Bildern um Kästchen, die über einen Schlagschatten verfügen, weshalb ich mit transparenten PNGs arbeite, weil die Elemente zum Teil übereinander auf unterschiedlichen z-indices liegen.

Da ich das ganze auch im IE6 darstellbar machen möchte, kann ich nicht mit Hintergrundbildern arbeiten, da ich den AlphaImageLoader dafür brauche. Soweit ich mich erinnern kann, gab's da dann Probleme im IE6.

Hat jemand noch einen weiteren Vorschlag für mich?

[gruenspan]

Da ich das ganze auch im IE6 darstellbar machen möchte ...

Darf man fragen warum Du das möchtest?

[freakgesicht]

@gruenspan

Klar - aus Rücksicht auf den Kunden. Baue einen Webshop und möchte es ihm ermöglichen, so viele Aufträge wie möglich zu bekommen - auch von jenen Nutzern, die noch mit dem Urgestein unterwegs sind.

Aus persönlicher Überzeugung will ich es eigentlich nicht machen, da man durch die Unterstützung derart veralteter Technologien natürlich die User nicht zum Update auf neue Versionen bewegt. Problematisches Thema, nicht?

Ich weiß auch, dass laut Statistiken nur mehr rund 1% diesen Browser benutzt - aber tja.

Was meint ihr dazu?

[wahsaga]

Wer mit einem IE6 surft, den wird es nicht vom Abschluss eines Geschäfts abhalten, wenn vielleicht die Transparenzeffekte auf einer Webseite nicht so perfekt aussehen.

PNG für Uralt-IEs durch GIFs ersetzen, den leichten Verlust an perfekter Optik in Kauf nehmen, fertig.

Das ist auf jeden Fall besser, als die Nutzer moderner Browser nicht von Techniken profitieren zu lassen, die die generelle Ladezeit der Webseite senken können.

[gruenspan]

Aus Erfahrung kann ich sagen, dass die meisten Benutzer vom Uralt-Browser IE6 in irgendwelchen Firmen-Netzwerken sitzen. Vergleiche vom entsprechenden Statistiken legen den Schluss nahe, das sich dabei um etwa 90% handelt.
Und in solchen Firmennetzwerken kann sowieso kaum einer etwas online bestellen.

Außerdem solltest Du bedenken, dass jemand der noch den IE6 benutzt wahrscheinlich nicht internetaffin genug ist um in irgendwelchen Shops was zu bestellen.
Und derjenige der es ist und den IE6 von mir aus aus nostalgischen Gründen nutzt, der weiß, dass er sich mit dem Ding selbst einschränkt.

Von daher schließe ich mich wahsaga an und rate Dir dazu lieber dem 1% vor den Kopf zu stoßen als den anderen 99%.

[freakgesicht]

Hmm, wenn ich das gewusst hätte...

Ich dachte schon, dass die meisten Webentwickler versuchen, so vielen Browsern wie möglich gerecht zu werden.

Wäre mal interessant, was der Durchschnitt der hier im Forum aktiven User dazu sagt... Gibt's da Umfragen? Ich wusste nicht, woran ich mich orientieren soll...

[wahsaga]

Ich dachte schon, dass die meisten Webentwickler versuchen, so vielen Browsern wie möglich gerecht zu werden.

Das kommt immer auch auf den Aufwand an, und was dessen Verhältnis zum erwarteten Nutzen angeht.

Inzwischen hat es sich in Bezug auf den IE 6 eigentlich ziemlich breit durchgesetzt, dass man versucht zwar die Funktionalität einer Seite wenn möglich auch darin noch zu garantieren – aber für die Optik keine allzu großen Verrenkungen mehr zu machen.

Und auch große Portale wie bspw. Facebook sagen mittlerweile einfach, das ist ein Browser, den wir nicht mehr unterstützen, und Basta.

(Natürlich gibt es auch Ausnahmen, in Fällen wo mit begründeten Argumenten immer noch Wert auf IE 6-Kompabilität gelegt wird, auch was Aussehen angeht. Aber die werden seltener.)