Images im sichtbaren Bereich nachladen, benutzerfreundlichkeit

[hotti]

hi,

s. Thema, jQuery hat das bestimmt, was ich brauche, nur ich kanns nicht finden...

Also: Die Seite hat einige (viele) Images, die mit dem jQuery-Plugin lazy-load beim Scrollen nachgeladen werden. Den Nachlade-Prozess soll eine Grafik zeigen, eine solche habe ich bereits drin, jetzt gehts nur noch darum, dass

-diese Grafik sichtbar wird, solange noch Grafiken am Laden sind
-diese Grafik unsichtbar wird, wenn das Laden der Grafiken in den sichtbaren Bereich abgeschlossne ist.

Vorerst habe ich eine einfache Steuerung, die beim scroll-Event die Sanduhr zeigt und nach einer fest vorgegeben Zeit das Ding verwelken lässt (fadeOut). Das sieht optisch schon ganz gut aus, passt jedoch noch nicht so ganz zum Ladeprozess an sich. Das geht bestimmt noch besser und vor Allem genauer abgestimmt, Idee?

Viele Grüße,
der Horst

[JürgenB]

Hallo hotti,

Bilder haben ein onload-Event.

Gruß, Jürgen

[hotti]

hi Jürgen,

Bilder haben ein onload-Event.

Ja, das ist richtig. Damit könnte ich jedes einzelne Bild befragen. Idealerweise möchte ich jedoch nur fragen müssen, ob alle Bilder innerhalb des sichtbaren Bereichs geladen sind, bei diesem feierlichen Ereignis soll die Sanduhr wieder verschwinden oder gar nicht erst aufpoppen.

--Hotti

[JürgenB]

Hallo hotti,

Bilder haben ein onload-Event.

Ja, das ist richtig. Damit könnte ich jedes einzelne Bild befragen. Idealerweise möchte ich jedoch nur fragen müssen, ob alle Bilder innerhalb des sichtbaren Bereichs geladen sind, bei diesem feierlichen Ereignis soll die Sanduhr wieder verschwinden oder gar nicht erst aufpoppen.

das wirst du wohl mit etwas Logik selbst programmieren müssen.

Gruß, Jürgen

[hotti]

hi,

das wirst du wohl mit etwas Logik selbst programmieren müssen.

Logisch ;)

Was ich habe, sind eine Masse an Images, die haben jeweils dasgleiche class-Attribute, was sich als Selektor eignet, damit läuft das lazy load.

Meine Frage ist, welches Event mir signalisieren könnte, ob alle Images im sichtbaren Bereich geladen sind.

--Horst

[JürgenB]

Hallo hotti,

Meine Frage ist, welches Event mir signalisieren könnte, ob alle Images im sichtbaren Bereich geladen sind.

da kenne ich keins. Ich würde für jedes Bild beim Starten des Ladens ein Flag false setzen, und dieses dann onload auf true ändern. Mit z.B. setInterval wird dann abgefragt, ob alle Flags true gesetzt sind. Das Laden der Bilder wird angestoßen, wenn das Bild fast im sichtbaren Bereich ist.

Alternativ erhält jedes Bild als src den Namen eines "Erstazbildes", dass dann überladen wird.

Gruß, Jürgen

[T-Rex]

Ola,

gibt es bei deinem lazy load keine callback möglichkeit, wenn das lazy yload abgeschlossen ist? Wenn ja ist es realtiv simple: lazyload.onstart -> setzte sanduhr lazyload.onstop -> Sanduhr ausblenden.
Eventuell bekommt du auch nach jedem Bild einen callback aufruf, dann zählst du einfach, wieviel sollten und wieviel sind geladen.

Gruß
crazy
T-Rex

[hotti]

Ola,

gibt es bei deinem lazy load keine callback möglichkeit, wenn das lazy yload abgeschlossen ist?

Ooopsa, ja, es gibt so etwas,

  
$("img.lazy").lazyload({  
    load : yourhandler  
});  

details hier

Damit müsste was zu machen sein...

Danke an ALLE!!!!

Horst Kresi

[T-Rex]

Horst,

ich wolle in mein CMS sowieso mal ein lazy load einbauen. Ich werde einfach dein nehmen. Das baue ich morgen ein und wenn ich mich da ein wenig eingearbeitet habe kann ich hoffentlich all deine Anliegen und Fragen klären.

Gruß
der späte T-Rex entgeht dem frühen Horst

[T-Rex]

Also wie versprochen hab es mir angeguckt.

Ich würde es so machen, dass ich eine Funktion schreibe die zählt wie viele Bilder im sichtbaren bereich sind und somit vom lazyload sichtbar gemacht würden. Diese Funktion muss natürlich vor dem ganzen lazyload ablaufen. Die Funktion liefert eine Zahl. Die würde ich aus testzwecken erstmal global irgendwo hinstecken - später dann aufgeräumt wo anders in einer Klasse oder so.
Dann läuft das Lazyload ab und führt nach jedem Bild, welches sichtbar gemacht wurde, das event "load". Hier übergibst du ein callback das die Zahl mit allen Bildern (von obiger Funktion) auf 0 runter zählt. Ist es bei 0 angekommen sind alle bilder sichtbar.

Um festzustellen ob das Element im Sichtbaren Bereich ist bzw. wie viele Elemente sichtbar sind kannst du die Hilfsmethoden von lazyload benutztn: belowthefold, rightoffold etc...

Alternativ könntest du das Plugin bearbeiten und mehr callback möglichkeiten einbauen. Der Code sieht überschaubar aus. Die Methode update ist für das sichtbar machen verantwortlich. Wenn die funktion durchgelaufen ist, ist das lazyload fertig. Davor könntest du eine Callbackmethode implementieren.

Hoffe ich konnte helfen

Gruß
Anal-ysten gehen immer von hinten an das Problem heran
T-Rey

[hotti]

hi,

Ich würde es so machen, dass ich eine Funktion schreibe die zählt [..]

Ach was, es geht viel einfacher. Das Sanduhr-Handle muss nur wissen, ob im sichbaren Bereich überhaupt noch was nachgeladen wird und das gibt dieses Plugin schon her.

Und Überhaupt: Wenn viele Leuts dieses ach so tolle Feature haben wollen, so toll ist es nun auch wieder nicht und gerade in Sachen seo total unangebracht. Ein serverseitig aufgesetzter Paginator ist durch nichts zu ersetzen, ist für den Benutzer griffiger und in Sachen seo gibts den Vorteil, dass aus einer Seite mehrere Seiten werden, womit das Ranking steigen kann...

Zur Schlagwort-Sache (Dein späterer Thread), Idee: Sammle ersteinmal die textlichen Inhalte und ordne die Schlagworte später zu. Vermutlich landen Deine Texte ohnehin in einer Tabelle, auf das entsprechende Feld könntest Du einen Fulltext-Index legen und dann schauen wir mal weiter ;)

Viele Grüße!

[Ole]

Hi

Meine Frage ist, welches Event mir signalisieren könnte, ob alle Images im sichtbaren Bereich geladen sind.

Du du eh mit jQuery arbeitest wäre vielleicht sowas wie das Viewport Selektor-Plugin etwas für dich.
Ansonsten hilft dir eine Suche nach "jquery above the fold" bestimmt auch weiter.

Gruß
Ole

[Ole]

Hi

Vorerst habe ich eine einfache Steuerung, die beim scroll-Event die Sanduhr zeigt [...]

Grade noch letzte Woche auf einem Kongress drüber gesprochen: Ein Indikator für den Ladeprozess lässt den User diesen ca. 30% langsamer erscheinen.

Außerdem signalisiert ein zusätzlicher Load-Indikator natürlich auch immer "die Seite ist noch nicht fertig geladen", auch wenn "above the fold" schon alles sichtbar ist. Außerdem signalisiert der Browser es ja auch von sich aus ... wenn auch, meist zum Glück, nicht allzu prominent.

Gruß
Ole

[hotti]

Hi

Vorerst habe ich eine einfache Steuerung, die beim scroll-Event die Sanduhr zeigt [...]

Grade noch letzte Woche auf einem Kongress drüber gesprochen: Ein Indikator für den Ladeprozess lässt den User diesen ca. 30% langsamer erscheinen.

Das ist interessant, weil ich das auch so wahrnehme. Die Sanduhr o.ä. Bildchen wird als Blickfang in Szene gesetzt, der User starrt das Ding an und bemerkt gar nicht was auf der Seite eigentlich wirklich abgeht (***). Wenn die Sanduhr dann abdampft, vergeht mindestens eine Schrecksekunde (individuell verschieden) bis User rafft, dass es aufgehört hat mit regnen, diese Totzeit entspricht in etwa den o.g. 30%.

Außerdem signalisiert ein zusätzlicher Load-Indikator natürlich auch immer "die Seite ist noch nicht fertig geladen", auch wenn "above the fold" schon alles sichtbar ist.

*** Wenn es faul programmiert ist ;)
Aber genau das ist der Zaubertrick. Wenn  User nur auf die Sanduhr starrt, gilt der faule Trick bereits als gelungen.

Mit ein bischen mehr Programmieraufwand habe ich die Sache grad eben synchron gemacht. Aber auch hier sind wir auf die Trägheit des Betrachters angewiesen: Die Sanduhr poppt erst auf, wenn der Ladeprozess bereits begonnen hat....

Viele Grüße,
Horst

PS: Es hat aufgehört mit Regnen.

[Matthias Apsel]

Om nah hoo pez nyeetz, hotti!

PS: Es hat aufgehört mit Regnen.

Hier hat es wieder angefangen stärker zu regnen, deshalb habe ich meine Gartenarbeit unterbrochen.

===

Vielleicht ist Interlacing die bessere Wahl?

Matthias

[hotti]

hi,

Vielleicht ist Interlacing die bessere Wahl?

Mal abwarten was User sagt ;)

Horst Wurmstich