css-Klasse mit JS-Funktion verbinden, aber wie?

  • Manchmal scheitert ein Vorhaben an Kleinigkeiten:

    Ich verwende RokSprocket und musste im Firefox-Inspector feststellen, dass alle Bilder in allen Showcases beim Aufruf der Webseite geladen werden, also auch alle, die überhaupt nicht im Viewport liegen. Also benötige ich eine Funktion, die sich LazyLoading nennt und für die ich hier ein schönes kleines Script mit gutem visuellem Ergebnis fand: https://codepen.io/rposbo/pen/EKmXvo


    Das Script „wartet” anscheinend gleich am Anfang mit "var lazy = []" darauf, dass per CSS die Klasse "lazy" benutzt wird, um in Aktion treten zu können.


    In der Demo des o.gh. Link von Codepen werden Bilder, die nicht geladen werden sollen, wenn sie außerhalb des Viewport liegen, wie folgt in das HTML eingebunden:

    Code
    1. <img
    2. src="images/grafik/spacer.gif"
    3. class="lazy"
    4. data-src="images/sample.jpg"
    5. alt="Sample"
    6. width="300px" />

    Die Demo funktioniert bei Codepen einwandfrei, vermutlich weil das Script inline im HTML liegt. Bei mir funzt das nicht, weil ich Inline-Scripte und Inline-CSS vermeiden will und das kleine Script in eine Datei gelegt habe, die mit dem Template verknüpft ist und von dort eingebunden wird und nun anscheinend die Verbindung zwischen "var lazy = []" einerseits und der Klasse ".lazy" andererseits wohl nicht erkannt wird.


    Wie muss ich die Verbindung zwischen den beiden in einer CSS-Datei herstellen? Gibt es so etwas wie: .class {src: "lazy.js";}


    Für Interessierte hier auch das Script aus dem o.g. Link:


    Sorry, aber die vollständige Erklöärung dieses Scripts findet sich nicht bei Codepen, sondern hier:

    https://www.robinosborne.co.uk…-dont-rely-on-javascript/


    Mag sein, dass dieser Link auch anderen weiter hilft, wenn viele Bilder die Ladezeiten der Website belasten.

  • Es gibt fertige Erweiterungen für Lazyload bspw. von Kubik Rubik ein Plugin.


    Man darf das aber nicht missverstehen. Dabei geht es darum, dass "normal" auf der Seite eingebundene Bilder auf der Seite erst dann angezeigt werden, wenn sie durch Scrollen erreicht werden. Wissen wir bei dir nicht, ob es darum geht, da kein Link.


    Als Gegenbeispiel: Das funktioniert meist nicht bei Slidern und ähnlichen, bei denen das Bilder-HTML bereits vorhanden ist, die Bilder aber durch CSS versteckt sind bis sie durch ein JavaScript aufgerufen werden. Dann muss man eine AJAX-Funktionalität einbauen, die die Bilder erst bei Bedarf lädt oder eine Preloader-Funktionalität, die zwar die Bilder alle lädt, aber der Besucher muss darauf beim Seitenladen nicht warten, da das im Hintergrund stattfindet.

    Die Demo funktioniert bei Codepen einwandfrei, vermutlich weil das Script inline im HTML liegt. Bei mir funzt das nicht, weil ich Inline-Scripte und Inline-CSS vermeiden will und das kleine Script in eine Datei gelegt habe

    Trotzdem sollte man zum Testen solche Scripte erst mal inline einbinden und zwar vor dem schließenden </BODY>. Dann hat man die Sicherheit, dass es generell funktioniert/funktionieren kann. Danach dann per Datei und weiß dann, dass es nicht grundlegend am Script liegt, wenn nicht funktioniert, sondern evtl. daran, dass es zu früh läuft, weil es im <HEAD> ist oder ähnliche Probleme, die man lösen muss.

  • Danke dir, daran hatte ich nicht gedacht, dass evtl. eine bereits vorhandene Einbindung eines Bildes in einen Slider nicht mittels LazyLoad-Script behandelt werden könnten.


    Bei mir ist die Situation noch etwas komplexer: Ich verwende RokSprocket-Module, in denen dann etwas ähnliches wie eine Slideshow läuft. Als Slide werden jedoch reguläre Joomla-Artikel verwendet, die in den Slide-Container geladen werden.

    Positioniere ich solch ein Modul mit z.B. 15 Artikeln / Slides auf der Homepage und jeder Artikel bringt ein Bild mit, so werden also nach meinen Beobachtungen alle 15 Bilder geladen, obwohl nur das Bild aus dem ersten Slide gezeigt wird.

    Ich konnte das erst auch nicht glauben, aber der Firefox-Inspector bestätigte mir diese Tatsache allein schon an den angezeigten Ladezeiten je Bild.


    Das Script und die Class "lazy" möchte ich nun bereits auf Artikel-Ebene anwenden, also direkt bei der Entstehung, wo das Bild platziert ist. Das Modul von RokSprocket lädt dann ja per Ajax den Artikel in den Slider und somit das fertige HTML des Artikel, an dem dann durch RokSprocket nix mehr verändert wird. Das habe ich ebenfalls mit dem Inspector geprüft.


    Weil ich befürchtete, dass das Script gar nicht wirksam in die Seite geladen wird, habe ich den Script-Code einfach ans Ende einer JS-Datei eingefügt, welches immer bei diesem Template geladen wird. Daher müsste es auch zur Verfügung stehen. Außerdem kann ich im Quelltext sehen, dass diese Script-Datei kurz vor dem schließenden body-Tag geladen wird. – Dennoch tut es nicht, was es sollte.


    PS: Die aktuelle Site läuft auf XAMPP, sodass ich sie hier nicht verlinken kann.


    Frage: Muss ich in meine CSS-Datei also keine Defintion von class="lazy" einfügen und der Browser erkennt, dass aufgrund des Scripts die Klasse "lazy" mit dem Script verbunden ist? (Ich dachte / denke, dass hier ein Problem vorliegen könnte.)

  • Weil ich befürchtete, dass das Script gar nicht wirksam in die Seite geladen wird, habe ich den Script-Code einfach ans Ende einer JS-Datei eingefügt, welches immer bei diesem Template geladen wird. Daher müsste es auch zur Verfügung stehen.

    Im Allgemeinen ist das nicht unbedingt ausreichend. Deshalb mein Hinweis. Viele Javascripte benötigen erst das vollkommen geladene HTML bzw. DOM bevor sie das arbeiten anfangen dürfen.

    Außerdem kann ich im Quelltext sehen, dass diese Script-Datei kurz vor dem schließenden body-Tag geladen wird.

    Dann ist ja gut.


    Wenn ich dein Script anschaue, fehlt da irgendwie was.

    - Es sucht nach Elementen, also hier Bildern mit CSS-Klasse lazy.

    - Dann setzt es das src="..." des Bildes anhand des "data-src"-Attributes des Bildes (Zeile 21). Wenn hingescrollt wurde.

    - Aber wo kommt das data-src eigentlich her? Man muss es setzen bevor das JavaScript startet.


    - Ich kenn das so,

    - - dass PHP erst das jeweilige src der Bilder ermittelt BEVOR die Seite vom Browser geladen/angezeigt wird. Sonst macht das ja alles überhaupt keinen Sinn.

    - - das src mit einem "unsichtbaren" Platzhalterbild belegt

    - - das src automatisch in data-src einsetzt.

    Code
    1. <img src="blank.gif" data-src="images/Altomunster_3.jpg2_w359.jpg" alt=""/>

    - - in deinem Fall dann noch die class=lazy setzt. Wobei ich das eigentlich für unnötig halte. Aber dein Script erwartet das eben, anstatt direkt auf Bilder <img> loszugehen.


    - - und dann wie oben beschrieben wartet das JavaScript auf das Scrollen, nachdem die Seite sichtbar ist, um beide Werte per Javascript dann wieder zurückzutauschen.


    Alternative wäre in Joomla, man schafft es, allen Bildern class, data-src händisch zu verpassen, damit sie im Frontend "schon so rauskommen". Das geht aber nur mühsam bei Bildern im Editor.


    Deshalb ist der praktikable Weg per eigenem Plugin und Events "onContentPrepare" oder "onAfterRender", wo man an die Bilder spezifischer drankommt, also auch Einleitungs- und Beitragsbild.


    Und nein. In deinem CSS musst da nichts setzen.

    Es gibt fertige Erweiterungen für Lazyload bspw. von Kubik Rubik ein Plugin.

    Das Plugin tut das alles wie gewünscht. Aber, wenn bestimmte Bilder bereits "versteckt" im ViewPort drinnen sind, kann's natürlich auch nichts ausrichten bzw. lädt dann die src.


    Das hängt ja auch davon ab, wie die Erweiterung arbeitet, die da übertölpelt werden soll. Wie die "versteckt", wann, ob die ein ""leicht"" erreichbares JavaScript-Event feuert, wenn sie dann schließlich anzeigt etc. pp., ob man da was zustricken kann.

    Ob sie überhaupt Plugin-Events mitnimmt usw. usf.


    Echt zu viel erwartet von Forums-Supportern.

  • Vielen Dank für deine Erklärungen! Leider komme ich da mangels Fachkenntnissen nicht mit. Wenn du die Funktionsweise des von mir ganz oben zitierten Script analysieren willst, kann ich nur auf den zweiten Link verweisen, den ich im zweiten Beitrag angegeben hatte:

    https://www.robinosborne.co.uk…-dont-rely-on-javascript/

    Der Autor erklärt dort recht genau, wie sein Script arbeitet. Und ich kann das nur entweder glauben oder sein lassen. :-)


    Natürlich habe ich derzeit damit experimentiert, die umständlichen src und data-src Aufrufe im Editor in das HTML des Artikel einzufügen und musste dazu auch die HTML-Prüfung des JCE-Editor deaktivieren. Und ich habe mich dabei genau an die Vorlage gemäß des o.g. Autors gehalten.


    Nun sagte "Later", dass die Verwendung von LazyLoad-Scripten innerhalb von Bildern in einer Slide-ähnlichen Anwendung evtl. nicht funktionieren könnte, weil die Bilder bereits "fertig geladen" hinein gelangen. (So hab ich's jedenfalls verstanden.)

    Nutze ich eine Erweiterung, wie das empfohlene PlugIn von KubikRubik, so könnte dies evtl. dies ja gerade dieser Problematik unterliegen, wohingegen ich im HTML des Artikels selbst (also sozusagen am Ursprung) den entscheidenden Code (src / lazy / data-src) eingefügt habe.

    Ich werde dennoch jetzt mal RubikKubik ausprobieren. 100 EUR Jahresbeitrag für die neueste Version sind mir aber reichlich viel, denn weitere Extensions von ihm benötige ich wohl nicht.

  • So, hab's ausprobiert. Es funktioniert hervorragend und auch bei allen Inhalten, die von RokSprocket gezeigt werden. Mit dem Firefox-Inspector und der Netzwerkanalyse kann man sehr schön sehen, wenn ein Bild in den Viewport kommt und geladen wird – und das auch noch mit einem Fade-In-Effket von jQuery.


    Wenn die Site veröffentlicht wird, bekommt Herr Vogel eine Spende von mir! Klasse PlugIn!


    Herzlichen Dank an Later und GHSVS für den guten Tipp!

  • OT:

    Bezüglich max_execution_time und sowohl auch apache2handler


    von http://www.hpp-kolleg.de/phpinfo.php dort

    im geschlossenen Thread Datenbankfehler bei Joomla Neu-Installationen - durch Reparaturfunktion nicht behebbar


    siehe z.B. auch:


    https://docs.joomla.org/J3.x:Installing_Joomla/de#


    Nach Update auf 3.9. Seite komplett down


    3.6. Fehler .... dort:

    http://www.joomlaportal.de/tip…oomla-faq.html#post990010


    Wenn du meine obigen Links nicht beachtest brauchst du dich über die entsprechenden Fehlermeldungen und Folgen übrigens nicht zu wundern.

  • OK, ich hab's noch mal überprüft und Einträge in der php.ini vorgenommen.

    Betr. Apache2Handler kann ich aber nix machen bzw. sehe keine Möglichkeit, etwas zu ändern.

    Hab deine Links beachtet.


    Eigener Eintrag in PHP.ini ist nun:

    upload_max_filesize = 500M

    post_max_size = 500M

    memory_limit = 512M

    max_execution_time = 120

    max_input_time = 100


    Jetzt OK?

  • Re:Later :

    Pech, es klappt doch noch nicht ganz: Wenn ich scrolle, bis das nächste Bild erscheinen sollte, geschieht zunächst nichts und das erwartete Bild erscheint nicht. Beginne ich dann erneut zu scrollen, brauche ich nur wenige Pixel Bewegung und schwupp ist das vermisste Bild zu sehen.

    Dieser Fehler ist jederzeit reproduzierbar. Der Cache von Joomla und der des Server (htaccess) sind deaktiviert und der Cache des Browsers ebenfalls. Von daher habe ich also keine Verfälschungen.

    Ist ein Bild einmal angezeigt worden, so bleibt es anscheinend eine Zeit lang ohne LazyLoad verfügbar, wenn ich hin- und her scrolle. Ist diese Zeit abgelaufen, wirkt das PlugIn wieder und der oben beschriebene Effekt tritt wieder auf.


    Da du dieses PlugIn anscheinend gut kennst, könnte es ja sein, dass dir dieses Verhalten bekannt ist und evtl. auch eine Abhilfe dazu?