Neu wie kann ich Bilder im Content den Lazy Load effekt zuweisen ?

Conny

Sehr aktives Mitglied
7. September 2009
528
50
Wenn man z.B. auf der Startseite viele Bilder hat (Inhalte -> eigene Seiten), so möchte ich daß die Bilder auch "Lazy Load" Effekt haben.
Wie muss ich diese Bilder einfügen.
HTML:
<img
 alt="mein Testbild"
 data-src="media/image/product/1206/md/bild.jpg" 
data-id="1"
 style="max-height: 344px;"
 src="media/image/product/1206/md/bild.jpg"
>

Reicht es dafür das "data-src" Attribut zu füllen?
 

martinwolf

Offizieller Servicepartner
SPBanner
6. September 2012
3.373
249
Okay, mein Fehler. Bin davon ausgegangen, dass JTL das lazyLoad für sämtliche Bilder triggert. Dem ist jedoch nicht so, stattdessen greift es nur bei Bildern innerhalb der Artikellisten.
 

Conny

Sehr aktives Mitglied
7. September 2009
528
50
Ok. Aber das kann man doch bestimmt auch nachprogrammieren, dass es so funktioniert wie in den Artikellisten.
Muss ich da noch ein js einbinden ?
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
5.230
1.001
Berlin
Theoretisch ja, vorsichtshalber solltest du den Bildern noch eine Klasse geben, damit da nichts durcheinander kommt.
Als Klasse verwende ich hier jetzt mal lazyloader

Code:
$(function() {
  $("img.lazyloader").lazy(($(window).height() / 2), function() {
   // hier blabla wenn in der Zwischenzeit Schmetterlinge über den Bildschirm fliegen sollen
  });
});
 

martinwolf

Offizieller Servicepartner
SPBanner
6. September 2012
3.373
249
Ich würde den Selektor anpassen, sodass nur Bilder die noch KEIN src-Attribut haben, berücksichtigt werden.
Code:
$(function() {
  $("img:not([src])").lazy(($(window).height() / 2), function() {
   // hier blabla wenn in der Zwischenzeit Schmetterlinge über den Bildschirm fliegen sollen
  });
});
 

Conny

Sehr aktives Mitglied
7. September 2009
528
50
Hi, danke für die Hilfe

@martinwolf - Wie soll ich das Bild dann einbinden ?
HTML:
       <img alt="mein Testbild" class="lazy img-responsive" src="media/image/product/1206/md/bild.jpg" />

Und bei dem Script kann ich den Spinner angeben - wäre das so richtig?
HTML:
$(function() {
  $("img:not([src])").lazy(($(window).height() / 2), function() {
   // hier blabla wenn in der Zwischenzeit Schmetterlinge über den Bildschirm fliegen sollen
   <img src="preloader.gif />
  });
});
 

martinwolf

Offizieller Servicepartner
SPBanner
6. September 2012
3.373
249
@Conny:

Das Bild benötigt anstelle des src-Attributes ein data-src. Klasse brauchst du keine bestimmte zuweisen, da reicht img-responsive, damit das Bild responsive skaliert. Die Funktion triggert für alle Bilder die KEIN src-Attribut haben.

HTML:
<img alt="mein Testbild" data-src="media/image/product/1206/md/bild.jpg" />

Die JS Funktion kann auf ein Minimum reduziert werden:

JavaScript:
$(function() {
    $("img:not([src])").lazy();
});

Anders als von CSS-Umsetzung kommentiert, wird
// hier blabla wenn in der Zwischenzeit Schmetterlinge über den Bildschirm fliegen sollen
nicht während des Ladens ausgeführt, sondern danach. Es ist ein callback. Auch der Treshold ist nicht notwendig. Dieser sorgt nur dafür, dass die Bilder geladen werden, bevor diese um den entsprechenden Pixelwert in den sichtbaren Bereich einlaufen.
 

golvreven

Gut bekanntes Mitglied
1. Oktober 2020
184
13
Hallo Martin,

ich habe die JS-Funktion bei uns im Bereich "Custom Javascript" des Salepix Plugins hinterlegt. Danach habe ich testweise die Bildpfade von src auf data-src geändert. Leider werden die entsprechenden Bilder nicht geladen.

Beim zweiten Versuch habe ich die JS-Funktion angepasst, weil die Klasse img-responsive hinterlegt ist.

$(function() {
$("img.img-responsive").lazy();
});

Ich habe auch src="[Bildpfad]" neben data-src="[Bildpfad]" stehen lassen. Leider funktioniert es nicht. Eventuell muss die Funktion an anderer Stelle hinterlegt werden.

Viele Grüße
g.
 
Zuletzt bearbeitet:

golvreven

Gut bekanntes Mitglied
1. Oktober 2020
184
13
Hallo noch einmal,

es funktioniert jetzt! Ich habe die JS-Funktion von css-umsetzung hinterlegt:

$(function() {
$('img.[css-klasse]').lazy(($(window).height() / 2), function() {
//
});
});

Die Bilder werden per lazyload nun geladen, wenn sie nur mit data-src hinterlegt sind. Ein Stellvertreterbild verwende ich nicht. Die Lösung ist natürlich noch nicht optimal im Hinblick auf Layout Shifting.

Allerdings kann ich nicht für alle Content-Bilder sprechen. Grafiken, die im Head-Bereich und im Footer eingebettet sind, kann ich mit der Funktion nicht auf der Startseite ansprechen. Auf der Startseite werden die Bilder dann weiterhin nicht über den Pfad data-src gefunden. Woran kann das liegen?

Viele Grüße
g.
 

golvreven

Gut bekanntes Mitglied
1. Oktober 2020
184
13
Und noch eine Wortmeldung zu dem Thema.

Leider gibt es mit der oben genannten Lösung ein Problem bei paginierten Seiten. Wenn ich beispielsweise ein Bild im SEO-Text unter Artikellistings per lazyload laden lasse, wird dieses nicht mehr geladen, wenn ich auf die ursprüngliche Seite zurückkehre. Ich meine es so:

1. Aufruf einer ersten Seite eines Artikellistings mit Bild unterm Listing > Bild wird per lazyload geladen
2. Aufruf einer zweiten Seite eines Artikellistings
3. Rückkehr von der zweiten auf die erste Seite eines Artikellistings mit Bild unterm Listing > Bild wird nicht mehr geladen

Woran kann das liegen?

Viele Grüße
g.
 

golvreven

Gut bekanntes Mitglied
1. Oktober 2020
184
13
Probier mal diesen Funktion, innerhalb von $(document).ready(){ /*hier*/ } aufzurufen.
Hallo wspread,

das macht leider keinen Sinn. Denn dann werden beispielsweise die Bilder in Artikellistings oder Slidern GAR nicht geladen. Ich muss dazusagen, dass unser Template lazyload von vornherein ausführt, jedoch nur für Artikellistings und Slider. Diese Automatik wird durch Deinen Vorschlag wahrscheinlich ausgehebelt.

Mein Problem ist: Beim Zurückblättern scheint die vormals aufgerufene Seite mit Artikellisting nicht wieder komplett geladen zu werden, sodass die von mir ergänzte lazyload-Funktion nicht ausgeführt wird.

Viele Grüße
g.
 

frijk

Gut bekanntes Mitglied
16. Juni 2009
212
6
Grundsätzlich: gibt es eine ähnliche Funktion wie für Bilder auch für <picture>-Elemente? Also können die srcset auch per Lazy-Funktion nachgeladen werden?

Aktuell noch Shop4, Vorbereitungen auf Update für Shop5 laufen schon, dauert aber noch ein bischen...

Danke vorab!
 
Ähnliche Themen
Titel Forum Antworten Datum
Wie kann ich ein Zahlungsziel in Tagen bei einer Zahlungsart hinterlegen? JTL-Wawi 1.6 4
Neu Google Shopping - wie wo kann Kategorien ausschließen ? Plugins für JTL-Shop 5
[erledigt] Kaufland Feld Hersteller kann wie angesteuer werden? kaufland.de - Anbindung (SCX) 0
Neu Alter bei Registrierung..Kunde kann so alt wie Jesus sein Allgemeine Fragen zu JTL-Shop 0
Dashboard kann keinen Umsatz und Gewinn wie in Version 1.5 anzeigen JTL-Wawi 1.6 0
Neu WIe kann man A-Z Garantien verhindern ? Amazon-Lister - Fehler und Bugs 5
Neu Wie kann man so eine Ansicht ausliefern? JTL-Shop - Ideen, Lob und Kritik 1
Link zu externen Adresse in der hidden-Linkgruppe - wie erstellen? Einrichtung JTL-Shop5 5
Neu B2B Shop - Versandkosten/Spedition - wie umsetzen? Allgemeine Fragen zu JTL-Shop 0
Neu Falsche Paket-Gewichte bei Auslieferung, was tun? Wie mit Nachberechnung von DHL umgehen? JTL-WMS / JTL-Packtisch+ - Fehler und Bugs 3
Neu Netto EK/GLD wie vereinfachen? Arbeitsabläufe in JTL-Wawi 2
Neu Workflow - Artikelpreis im Auftrag ändern. Wie geht das? User helfen Usern - Fragen zu JTL-Wawi 11
Neu Beschaffung - Bestellmenge bis Maximalbestand - aber wie? Arbeitsabläufe in JTL-Wawi 20
Migration von JTL Shop 4 auf JTL Shop 5 - wie ein nahtlosen Übergang vorbereiten? Upgrade JTL-Shop4 auf JTL-Shop5 4
Neu Wie "Neu im Sortiment" mit Ameise importieren? User helfen Usern - Fragen zu JTL-Wawi 2
Neu Hilfe > wie optimal mit Kundengruppen arbeiten / oder eine Alternative? User helfen Usern - Fragen zu JTL-Wawi 3
Neu Wie geht ihr mit Innenumsätzen um? Arbeitsabläufe in JTL-Wawi 7
Neu Geht das mit Ameise. Artikel-Nr 001 mit Bild, nun soll neuer Artikel-Nr. 002 und das selbe Bild bekommen wie Artikel-Nr 001 User helfen Usern - Fragen zu JTL-Wawi 1
Neu Plugin: JTL Google reCaptcha v2 - Wie erstellt man die Schlüssel dafür? Plugins für JTL-Shop 0
Neu Aus d'Italia wird d&#180;Italia - wie beheben? User helfen Usern - Fragen zu JTL-Wawi 1
Wie lange wartet ihr auf Rückmeldung? kaufland.de - Anbindung (SCX) 2
Neu Anzeige von eigenen Feldern in der Artikelliste wie in 1.5.x möglich? User helfen Usern - Fragen zu JTL-Wawi 0
Webinar: Meeting the new normal - Wie Corona das Verhalten der Onlineshopper änderte und was davon bleibt Messen, Stammtische und interessante Events 0
Wie schalte ich die Meldung "Fehler in der Steuervalidierung beheben" aus? JTL-Wawi 1.6 9
Video auf Ebay einfügen - wie geht das? JTL-Wawi 1.6 5
Neu Variable für Vorgangsstatus in Wawi / wie Vorgangsstatus auf Pickliste anzeigen JTL-Wawi 1.6 0
Neu Wie erstelle ich eine freie Gutschrift für Preisnachlass? Arbeitsabläufe in JTL-Wawi 9
Neu Bio-Nummer wie und wo am besten anlegen um auf Lieferschein / Rechnung auszugeben User helfen Usern - Fragen zu JTL-Wawi 1
Neu Ein Problem in der Buchhaltung - vielleicht wisst ihr wie es geht User helfen Usern - Fragen zu JTL-Wawi 1
Neu Wie Farbswatches von Variationen in Artikelübersicht "Galerie" sichtbar machen? Betrieb / Pflege von JTL-Shop 4
Neu Wie bekomme ich die Retouren ID über Shopware 5 per Magnalister nach Otto? User helfen Usern - Fragen zu JTL-Wawi 0
In Diskussion Wie POS-Produkte in WMS ausblenden? JTL-WMS / JTL-Packtisch+ - Fehler und Bugs 4
Merkmale in Attribute umwandeln - wie geht das? JTL-Wawi 1.6 1
Neu Workflow - wie ist die Arbeitsweise ? User helfen Usern - Fragen zu JTL-Wawi 6
Neu Amazon Verkäuferkonto freigeschaltet - Produkte in JTL eingspielt, nun die Frage, 50.000 Artikel wie bekommt man diese mit EAN und teils ohne EAN Amazon-Anbindung - Ideen, Lob und Kritik 5
In Diskussion Workflow-Erweiterte Abfrage wie oft ein Artikel verkauft wurde JTL-Workflows - Ideen, Lob und Kritik 0
Neu JTL-AcademyDay 2022 - Wie geht das in der Datenbank? Du fragst, wir antworten! - Folgethread User helfen Usern - Fragen zu JTL-Wawi 19
Neu JTL-AcademyDay 2022 - Wie wird es richtig hübsch? Vorlagenanpassung in JTL-Wawi - Folgethread Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 14
Neu Exportformat Shop5 - wie JTL-Debug nicht helfen will User helfen Usern - Fragen zu JTL-Wawi 3
Neu Wenn das Mega-Menü öffnet, wurd unter dem Menü der Shop anders gefärbt - wie stylen? Templates für JTL-Shop 8
Neu Wie setze ich den Haken Bilderausgabe für Drucken/Mailen/Faxen für ALLE meine Artikel User helfen Usern - Fragen zu JTL-Wawi 4
Neu Shop lief ohne Wawi, Bestellungen manuell angelegt, wie weiter machen? Arbeitsabläufe in JTL-Wawi 0
Neu Klon von 4er Shop auf Staging Sudomain anlegen - wie gehe ich korrekt vor? Installation / Updates von JTL-Shop 7
Neu Newsletter verschicken? Wie? Hoster hat uns gekickt! Betrieb / Pflege von JTL-Shop 3
Neu Wie beendet ein normaler User den Worker .... User helfen Usern - Fragen zu JTL-Wawi 11
Neu Text (ca. 4000 Zeichen) auf Rechnung anzeigen lassen... wie geht's? User helfen Usern - Fragen zu JTL-Wawi 6
Neu JTL Header Plugin: Weitere Grafik/Badge neben dem Logo platzieren, wie? Templates für JTL-Shop 4
Neu Wie lautet der SQL Befehl zum löschen der Kommentare? User helfen Usern - Fragen zu JTL-Wawi 4
Neu DHL: Digitaler Einlieferungsbeleg, wie abschalten? JTL-ShippingLabels - Ideen, Lob und Kritik 4
Neu Kundennummer jährlich zurücksetzen? Wie macht ihr das User helfen Usern - Fragen zu JTL-Wawi 6

Ähnliche Themen