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

  • JTL-Connect 2022: Ihr habt noch kein Ticket? Jetzt schnell sichern! Die PreConnect ist bereits ausgebucht, auch für die After-Show-Party auf der Ocean Diva sind nur noch wenige Plätze verfügbar! HIER geht es zum Ticketverkauf

  • Das Stable Release von JTL-Wawi 1.6 ist startklar: HIER gehts zum Forenbeitrag

Conny

Sehr aktives Mitglied
7. September 2009
515
49
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.369
244
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
515
49
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.084
945
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.369
244
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
515
49
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.369
244
@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

Aktives Mitglied
1. Oktober 2020
163
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

Aktives Mitglied
1. Oktober 2020
163
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

Aktives Mitglied
1. Oktober 2020
163
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

Aktives Mitglied
1. Oktober 2020
163
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
211
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 für einen Artikel einen alternativen Hersteller-Artikelnamen mitführen? User helfen Usern - Fragen zu JTL-Wawi 4
Neu Wie kann ich die Artikelmerkmale auf der Produktseite im Reiteranzeigen lassen anstatt unter der Beschreibung? Templates für JTL-Shop 0
Neu Wie kann ich den neuen Worker2 automatisch starten User helfen Usern - Fragen zu JTL-Wawi 19
Neu Wie kann ich die Bild Anzeigegröße der Kategorie ändern? Allgemeine Fragen zu JTL-Shop 0
Neu Wie kann man Push-Benachrichtigungen im Shop 5 anzeigen? Allgemeine Fragen zu JTL-Shop 0
Wie kann man FBA Bestellvorschläge generieren, wenn das FBA Lager Nachschub benötigt JTL-Wawi 1.6 7
Neu wie kann man die Artikelgewichte mit auf den Picklisten angeben Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 1
Angemeldete Retoure zurücknehmen - wie? JTL-Wawi 1.6 2
Neu Preiserhöhung mit Datum in Zukunft, aber Angebote mit längerer Laufzeit, wie vorgehen? User helfen Usern - Fragen zu JTL-Wawi 1
Neu Wie bekomme ich erweiterte Kundendaten im meine Rechnung? User helfen Usern - Fragen zu JTL-Wawi 4
Neu SW6 Aufträge werden zeitverzögert übertragen - Wie lösen? Shopware-Connector 0
Neu Testumgebung - Webshopabgleich ja, Fullfillment, eBay, Amazon etc. - Nein.Wie sicher vorgehen? User helfen Usern - Fragen zu JTL-Wawi 2
1.6. Tabelle tBestellungAttribute weg - Abfragen troztdem möglich - wie (lange) geht das? JTL-Wawi 1.6 3
Neu NOVA Template Theme mit komplett schwarzem Hintergrund - wie ansetzen? Templates für JTL-Shop 3
Neu Wie komm ich an die eigenen Felder (Firma) in den Druckvorlagen => Mailen => Email Text (Nicht List & Label) Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 2
Neu TIPP: Wie frage ich Variablen ab? Also das was in der ausgegeben wird. User helfen Usern - Fragen zu JTL-Wawi 3
Neu VCS Lite deaktiviert - wie geht's weiter? Amazon-Anbindung - Ideen, Lob und Kritik 4
Neu Wie stelle ich bei z.B. bei Amazon.com ein? User helfen Usern - Fragen zu JTL-Wawi 3
Neu Coupon für Artikel mit 7% und 19% USt wie lösen? Grundsätzliches JTL Shop Problem Allgemeine Fragen zu JTL-Shop 9
Neu MS SQL Express - Größe der Datenbank - wie viel ist noch frei? Wie ermitteln? User helfen Usern - Fragen zu JTL-Wawi 0
Neu Umzug auf JTL Shop - wie umgehen mit Länderdomains? Installation / Updates von JTL-Shop 2
Neu Bestehendes Shopware-Kundenkonto mit Wawi-Kundenkonto verknüpfen, wie? Shopware-Connector 1
Neu Wie binde ich Datenbankabfragen in den Formulareditor ein? User helfen Usern - Fragen zu JTL-Wawi 2
Neu Wie viele Mandanten "packt" die JTL-Wawi? Starten mit JTL: Projektabwicklung & Migration 5
Sendung an Postfiliale wie Adressieren? JTL-Wawi 1.6 3
Beantwortet Programm starten in C:\Program Files (x86)\JTL-Software (Ameise) - wie Pfad angeben? JTL-Workflows - Fehler und Bugs 8
Webinar: Meeting the new normal - Wie Corona das Verhalten der Onlineshopper änderte und was davon bleibt Messen, Stammtische und interessante Events 0
Neu Beleg an Eingangsrechnung anhängen. Wie geht das? Allgemeine Fragen zu JTL-Shop 0
Neu Wie storniert Ihr Internetmarken, speziell Warenversand International? User helfen Usern - Fragen zu JTL-Wawi 0
Nach WaWi-Update wie Variantenkombis / Kindartikel erstellen!? JTL-Wawi 1.6 2
Neu Wie buche ich den Wareneingang bei einer Umlagerung aus meinem externen Kommissionslager (kein WMS Lager) in mein WMS Lager? User helfen Usern - Fragen zu JTL-Wawi 0
Neu Wie macht ihr die Rückabwicklung eine Kaufs? inkl. Rückzahlung Ebay-Payment User helfen Usern - Fragen zu JTL-Wawi 1
Wie macht ihr die Rückabwicklung bei Ebay Rückläufer? Inkl. Rückzahlung Ebay-Paymant? JTL-Wawi 1.6 1
Neu Versandbenachrichtigung (Digitaler Lieferschein): Wie Textvorlage designen, formatieren, gestalten? Lieferschein anhängen möglich? Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 3
Neu Verkauf eines Komplettkitts der mehrere (Unter-)Kits enthält = Stückliste in Stückliste geht nicht !? wie ist die Vorgehensweisen dann?? JTL-Wawi - Fehler und Bugs 2
Gelöst Auftrag über Packtisch mit vielen Positionen ohne Artikelscan direkt ausliefern, wie? Arbeitsabläufe in JTL-WMS / JTL-Packtisch+ 7
Neu Nova - Wie passe ich die Scrollbar an? Templates für JTL-Shop 0
Neu Anzeige der UVP in der Listenansicht. Wie? Allgemeine Fragen zu JTL-Shop 0
Neu Kein Name in eBay Bestellung! Wie geht das? eBay-Anbindung - Fehler und Bugs 3
Seid 1.6 exportiert er Versandetiketten, die außen wie vorher allerdings sich nicht einscannen lassen von DPD aus ? JTL-Wawi 1.6 3
Neu Auftragssplit. Wie Zahlung aufteilen? Installation von JTL-Wawi 2
Neu Bestellterminal wie bei McDonalds User helfen Usern 10
Webinar - JTL-Wawi ganz nach Eurem Format: Wie Ihr individuelle Farben und Symbole festlegt Messen, Stammtische und interessante Events 0
Webinar - Pflegeleicht wie nie: Die Neuerungen am Artikel in JTL-Wawi 1.6 Messen, Stammtische und interessante Events 0
Neu Wie wird Skonto in der WAWI verbucht? Arbeitsabläufe in JTL-Wawi 4
Neu EU Auslandsbestellung, wie wählt JTL das korrekte Buchungskonto ? User helfen Usern - Fragen zu JTL-Wawi 0
Neu Wie handhabt ihr das Ausliefern von Artikeln (WMS Lager) aus verschiedenen Lägern? Arbeitsabläufe in JTL-Wawi 0
Neu Testshop einrichten kann das Fenster "Verkaufskanäle" nicht mit speichern beenden... Allgemeine Fragen zu JTL-Shop 1
Neu JTL2Datev - OSS Wer kann helfen? User helfen Usern - Fragen zu JTL-Wawi 3
Neu Connector-Anbindung Shopware 6 kann nicht aktiviert werden - Code 0 | Status 405 Shopware-Connector 5

Ähnliche Themen