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

Conny

Sehr aktives Mitglied
7. September 2009
548
60
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.385
262
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
548
60
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
6.639
1.583
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.385
262
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
548
60
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.385
262
@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.
 
  • Gefällt mir
Reaktionen: nmueller

golvreven

Gut bekanntes Mitglied
1. Oktober 2020
217
18
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
217
18
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
217
18
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
217
18
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
217
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
Neu Wie kann ich im JTL-Shop einen Abwesenheitshinweis einstellen? Allgemeine Fragen zu JTL-Shop 1
Neu Wie kann ich eine Inventurliste als Excel- oder csv-Datei erstellen? Gelöste Themen in diesem Bereich 3
Wie kann ich eine Benachrichtigung bei einem Wareneingang auslösen mit einer Mail über die Artikel die eingebucht wurden JTL-Wawi 1.8 2
Neu Wie kann ich die vergebene Coupons sehen. Welche Kunde welchen Copoun Allgemeine Fragen zu JTL-Shop 0
Neu Wie kann ich Alt-Texte für Bilder an Shopify senden? Shopify-Connector 2
Neu Wie kann ich nicht mehr vorhandene ausländische USt-ID löschen? User helfen Usern - Fragen zu JTL-Wawi 1
Neu [Umfrage] - Was hälst du von Updates - Innovativ oder aufwendig? Wie kann es besser gehen? Installation / Updates von JTL-Shop 0
Workflow Manuell HTML Request wie Server Antwort verarbeiten JTL-Wawi 1.7 0
Trackinglink enthält Hashtag - wie eingeben? JTL-Wawi 1.8 0
Neu Wie setzt Ihr eure Dev/Staging Umgebungen auf? Betrieb / Pflege von JTL-Shop 0
Neu Fehler: Sonderpreis falsch formatiert, wird nicht importiert; obwohl importiert genau wie exportiert User helfen Usern - Fragen zu JTL-Wawi 0
Neu Wie erstelle ich das richtige Layout für handy, Desktop etc Allgemeine Fragen zu JTL-Shop 0
Neu Wie gut ist die Datenbanksynchronisation? JTL-Wawi - Ideen, Lob und Kritik 4
Neu Artikelpreise Verknüpfen (ähnlich wie Stücklisten) User helfen Usern - Fragen zu JTL-Wawi 0
Neu Conrad anbindung an JTL / eazy auction, aber wie? User helfen Usern - Fragen zu JTL-Wawi 4
[JTL-WAWI API] Wie funktioniert die Item-Image API? JTL-Wawi 1.8 0
Neu Wawi Artikelattribut = externer Link wie am besten darstellen beim Artikel? Allgemeine Fragen zu JTL-Shop 0
Neu Expressbearbeitung-Gebühr. Wie realisieren? Allgemeine Fragen zu JTL-Shop 1
Zusatzkosten wie Zölle JTL-Wawi 1.7 2
Neu Wie Wawi (Kundendaten) zurücksetzen User helfen Usern - Fragen zu JTL-Wawi 10
Neu Wie Lizenz kündigen User helfen Usern - Fragen zu JTL-Wawi 13
Neu Wie funktioniert Individualproduktion / Einzelfertigung JTL-Plan&Produce - Ideen, Lob und Kritik 4
Neu Kategoriebilder werden immer mit großem leeren Platz (wie für das 2.Bild) angezeigt Allgemeine Fragen zu JTL-Shop 6
Zusatzkosten wie Zölle JTL-Wawi 1.7 4
Neu 2 Mandanten 2 Datenbanken wie läuft es mim POS User helfen Usern 0
Neu Wie bekomme ich Statistik "Kunde/Artikelnummer/Menge/Netto-VK" auf Basis Rechnungspositionen? Arbeitsabläufe in JTL-Wawi 0
SQL ifGetPrice liefert nur netto Preise, wie komme ich an Brutto ran? JTL-Wawi 1.7 4
Neu Wie importiere ich die Zahlungs-ID für meine eigene benutzerdefinierte Zahlung, wie es andere Anbieter wie Paypal und Molli Payments in Shopware 6? Onlineshop-Anbindung 0
Neu Wie macht ihr das? Ebay Verkäufe automatisieren. Arbeitsabläufe in JTL-Wawi 3
Firmen- und E-Mail Einstellungen: Wie einrichten, wenn Firmenname (Impressum) anders ist als Shopname/Marke? JTL-Wawi 1.8 0
In Bearbeitung JTL POS, Bargeldentnahme zu Datev, wie? Allgemeine Fragen zu JTL-POS 1
Neu Workflow Aktion E-Mail senden kann nicht Plain und HTML Email zusammen versenden Arbeitsabläufe in JTL-Wawi 6
Neu Wo kann ich einstellen, welche Rechnungsvorlage "gezogen" wird Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 13
Neu Amazon Prime - DHL Versandlabel kann nicht gedruckt werden "Ein Prime Versandlabel wurde nicht gekauft, da kein verfügbares gefunden wurde." JTL-ShippingLabels - Fehler und Bugs 0
Neu Versandschein für Schweiz kann nicht gedruckt werden folgende Fehlermeldung JTL-ShippingLabels - Fehler und Bugs 1
Neu kann man in List & Label Zeilen auskommentieren User helfen Usern - Fragen zu JTL-Wawi 4
Kann ich eine email an die Wawi senden durch die dann ein neuer Auftrag generiert wird? (Daten müssen händisch vervollständigt werden...) JTL-Wawi 1.8 2
Neu Kann uns jemand beim Otto einrichten helfen? Dienstleistung, Jobs und Ähnliches 3
Beantwortet #GEFUNDEN# Suche jemand , der uns eine (automatische) SQL Abfrage erstellen kann mit Mail Ausgabe Dienstleistung, Jobs und Ähnliches 2
Neu Woran kann es liegen, dass ein neu erstellter Connector-Verkaufskanal nicht in der Statusliste des Workers vorkommt? Shopify-Connector 2
Neu syntaxfehler report.invoicebilltoaddress.country kann nicht interpretiert werden Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 0
Neu Wer kann bei uns ein EcoDMS einrichten? Dienstleistung, Jobs und Ähnliches 16
Verwiesen an Support TSE Modul wird nicht mehr erkannt, kann auch nicht wieder aktiviert werden, diverse Fehlermeldungen JTL-POS - Fehler und Bugs 1
In Bearbeitung Sunmi P2 kann keinen Barcode scannen JTL-POS - Fragen zu Hardware 5
Neu PayPal - Benachrichtungen über Zahlung -> EMail. Wo kann man den Betreff bearbeiten? User helfen Usern - Fragen zu JTL-Wawi 6
Neu JTL WAWI Icecat Anbindung - Wer kann einrichten? User helfen Usern - Fragen zu JTL-Wawi 0
Neu Wawi läuft, aber ein Rechner hat den Pfad zur Datenbank verloren, Mandant kann nicht ausgewählt werden User helfen Usern - Fragen zu JTL-Wawi 3
Neu Versandart kann nicht gelöscht werden User helfen Usern - Fragen zu JTL-Wawi 0
Neu - Lieferzeit in Wochen / Monaten statt Tagen SHOP-4080 - wo finde ich diese Möglichlichkeit im Admin Bereich Installation / Updates von JTL-Shop 1
Verwiesen an Support wo finde ich die Logdatei von den Workflows JTL-Workflows - Fehler und Bugs 9

Ähnliche Themen