Seiten vorladen und Unschärfe

[pipkin]

Moin,

suche nach einer Möglichkeit, Seiten vorzuladen und beim Navigieren mit Unschärfe zu arbeiten. Ähnlich wie hier:

http://udowalz.de

(Hierbei handelt es sich anscheinend um eine Wordpress-Seite. Aber ich würde das lieber mit Contao machen...)

Wie würde man sowas mit Contao erreichen?

Vielen Dank für Eure Einschätzungen ...

[JanFriebe]

Hallo pipkin,

ich denke was du suchst ist das "lazy loading" mit javascript. Gestattet das – wortwörtlich – träge Laden von Elementen, zum Beispiel von Bildern, während des Scrollvorgangs.

[pipkin]

Ja, mit "lazy load" ist da offenbar einiges gemacht.
Was mich noch wunderte ist das Verhalten beim Navigieren. Es sieht ja so aus, als wenn nach dem Klick die aktuelle Seite erstmal weggeblendet wird, und dann kommt die neue Seite ... auch die URL ändert sich erst nach dem "Wegblenden".

Sieht erstmal nach viel Javascript aus.

[tab]

Ja, ist sehr viel Javascript, über 1,2 MB. Dazu noch ein halbes MB CSS. Hier auf dem alten Rechner, an dem ich gerade arbeite, kommt der Effekt schon sehr ruckelig. Google Pagespeed ist auch nicht übermäßig begeistert.

[Spooky]

Hallo pipkin,

ich denke was du suchst ist das "lazy loading" mit javascript. Gestattet das – wortwörtlich – träge Laden von Elementen, zum Beispiel von Bildern, während des Scrollvorgangs.

Lazy loaded wird dort nichts. Er meint das Laden der Seiten per AJAX + den Effekt dazu. Letzters ist eine einfache CSS Transition. Beides lässt sich prinzipiell auch in Contao umsetzen.

[JanFriebe]

Das musst du mir erklären Spooky das interessiert mich jetzt. Wie kann man denn in contao ohne große Einstellungen oder Umstellungen die Seiten per AJAX laden ?

[Spooky]

Das musst du mir erklären Spooky das interessiert mich jetzt. Wie kann man denn in contao ohne große Einstellungen oder Umstellungen die Seiten per AJAX laden ?

In Contao musst du dazu ja gar nichts machen. Du kannst ja die gesamte Seite nach belieben per AJAX laden - natürlich ist das jedoch ineffizient.

Damit über AJAX nicht die komplette Seite geladen wird, sondern bspw. nur der Inhalt aus der Hauptspalte, kann man zB die [ajax_layout] Extension benutzen, als Hilfe.

[pipkin]

In Contao musst du dazu ja gar nichts machen. Du kannst ja die gesamte Seite nach belieben per AJAX laden - natürlich ist das jedoch ineffizient.

Verstehe ich das richtig - damit man diesen Effekt (fade/ blur etc.) mit CSS/ Transitions hinbekommt, müssen dann aber doch ganze Seiten per Ajax geladen werden?

Bzw. anders ausgedrückt: hier werden keine "inneren" Bereiche per Ajax geladen, sondern der gesamte Seitenwechsel läuft über Ajax, korrekt?
Dass nur der untere Teil einen Effekt hat und die Navigation keinen, spielt dabei ja keine Rolle...

[Spooky]

Der Effekt und das Laden von Inhalten sind völlig unabhängige Dinge.

[pipkin]

Ja, ok.
Aber nochmal für Doofe: Bedingung für so einen Effekt beim Seitenwechsel ist, dass ich die Seiten per Ajax lade, und zwar komplett. Korrekt?

Ist es das, was hier mit "Ajax navigation" gemeint ist?
https://demos.jquerymobile.com/1.2.0...ansitions.html

[Andreas]

Den Effekt sollte man auch so hinbekommen, ohne Ajax. Mit JS den Klick auf die Navigationspunkte abfangen, den Effekt ausführen, dann die neue Seite laden, welche erstmal ausgeblendet ist und dann mit JS oder CSS einblenden.

Den Effekt bei udowalz.de finde ich übrigens ziemlich doof, ich würde doch lieber die Seite sehen zu welcher ich navigiere, anstatt einen Ausblendeffekt, dann eine Ich-Lade-Mitteilung und dann einen Einblendeffekt. Das Navigieren auf dieser Site ist damit sehr träge.

Noch'n Tipp: Seiten mit Ajax zu laden kann viele Nachteile mit sich bringen.

[pipkin]

Hm... kann man denn an irgendwas leicht erkennen, ob hier Ajax im Spiel ist?
Ich meine ohne in die Javascripte zu luschern...

...dann die neue Seite laden, welche erstmal ausgeblendet ist

Ging mir auch durch den Kopf. Aber irgendwas sagt mir, dass es dabei bestimmt wieder bei einigen Browsern zu einem kurzen Aufblitzen von Weiß o.ä. kommt. Vielleicht bin ich aber auch zu pessimistisch und sollte das einfach mal testen.

Das Navigieren auf dieser Site ist damit sehr träge.

Mir ist das Geblurre auch zu viel - aber ein Ein- und ausfaden könnte ganz schick sein und ist vermutlich auch weniger rechenintensiv.

Noch'n Tipp: Seiten mit Ajax zu laden kann viele Nachteile mit sich bringen.

Danke für den Tipp, interessant ... mal gucken was ich zu Nachteilen im Netz finde...

[Spooky]

Hm... kann man denn an irgendwas leicht erkennen, ob hier Ajax im Spiel ist?

Meinst du auf von dir geposteten Beispiel Seite? Einfach mit den Developer Tools deines Browsers nachsehen . Dort wird die gesamte Seite per AJAX geladen.

[mlweb]

Den Effekt bei udowalz.de finde ich übrigens ziemlich doof, ich würde doch lieber die Seite sehen zu welcher ich navigiere, anstatt einen Ausblendeffekt, dann eine Ich-Lade-Mitteilung und dann einen Einblendeffekt. Das Navigieren auf dieser Site ist damit sehr träge.

Ich habe hier recht langsames Internet und die Seite wieder zugemacht, weil die Ladezeit unerträglich war.

[pipkin]

Dort wird die gesamte Seite per AJAX geladen.

Ich konnte das leider noch nicht richtig einschätzen, zumal ich auch den Eindruck hatte, dass jQuery mobile dort im Einsatz ist. Ich bin daher gar nicht sicher, dass es sich um einzelne Seiten handelt.

@ mlweb
Danke für den Check. Ich bin noch hin und her gerissen, ob das obige Beispiel überhaupt nachahmenswert ist.
Aber dass die Performance durch Datengeschwindigkeit gebremst wird (und nicht nur clientseitig durch das Gerät/ Browser) ist ein neuer Aspekt für mich!

Zur Beurteilung von Nachteilen in Bezug auf SEO bin ich noch nicht weit vorgedrungen. Klingt aber so, als würde Ajax es tendenziell problematischer machen...

@ Andreas
Hattest Du ein Javascript zum Abfangen der Clicks schon mal in den Fingern?
Ich muss dazu vermutlich die Contao-Navigation umschrauben, damit der Aufruf nicht losgejagt wird...

[Andreas]

Das dürfte recht simpel sein, sowohl mit jQuery als auch mit MooTools. Ungetestet:

// MooTools
myElement.addEvent('click', function(event) {
  event.stop(); // Prevents the browser from following the link.
  var target = this.get('href');
  // Do something
});

// jQuery
myElement.click(function(event) {
  event.preventDefault(); // Prevents the browser from following the link.
  var target = $(this).attr('href');
  // Do something
}); 

[pipkin]

Klasse, vielen Dank! Den Ansatz probiere ich parallel auf jeden Fall aus.
Momentan teste ich gerade ein Ajax-Plugin aus und begreife langsam, was für dusselige Fragen ich teilweise gestellt habe ;-)

Noch'n Tipp: Seiten mit Ajax zu laden kann viele Nachteile mit sich bringen.

Ich habe jetzt einiges gelesen und klopfe gerade ab ...

Bekannt sind mir bisher diese:

• Problem mit Vor-/ Zurück Browserfunktion (kann aber abgefangen werden..)
• U.U. anderer Content bei direkter Aufruf der Seite (dito)
• SEO: Crawling-Probs von Suchmaschinen, das bei Google angeblich vom Tisch ist, so 100% eindeutig ist es aber nicht.
• Server-Belastung ist tendenziell höher
• Insb. im Zusammenhang mit CSS Transitions nichts für ältere Browser (z.B. vor IE 10)
• Durch Ladeverhalten u.U. subjektiv empfundenes längeres Warten

Ist das soweit vollständig oder kennt Ihr noch weitere, evtl. noch gravierendere Nachteile?
Insb. im Zusammenhang mit Contao?

[Spooky]

Ich konnte das leider noch nicht richtig einschätzen, zumal ich auch den Eindruck hatte, dass jQuery mobile dort im Einsatz ist. Ich bin daher gar nicht sicher, dass es sich um einzelne Seiten handelt.

Sieh' dir in den Developer Tools einfach die Requests und Responses an.

Zur Beurteilung von Nachteilen in Bezug auf SEO bin ich noch nicht weit vorgedrungen. Klingt aber so, als würde Ajax es tendenziell problematischer machen...

• SEO: Crawling-Probs von Suchmaschinen, das bei Google angeblich vom Tisch ist, so 100% eindeutig ist es aber nicht.

Das sollte in dem von dir geposteten Beispiel egal sein. Die Navigation hat ja weiterhin reguläre Links, die die Crawler verfolgen können und hinter denen sich die vollständige Seite befindet (wie gesagt, es wird ja die gesamte Seite per AJAX geladen).