TYPO3 – jQuery Unveil / Lazyload für Images einbauen
Mit jQuery Unveil lassen sich Bilder nachladen, wenn sie im Viewport sichtbar werden. Wie das Jquery PlugIn funktioniert, könnt Ihr bei der T3N nachlesen: zum jquery Unveil / Lazyload Artikel.
Hier möchte ich Euch beschrieben, wie Ihr das JavaScript PlugIn in Eure TYPO3 Webseite einbauen könnt.
1 { layout { lazyload { element ( <img src="fileadmin/Templates/Img/Blank.gif" class="img-responsive lazyload" ###SOURCECOLLECTION######PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###> <noscript> <img src="###SRC###" ###PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###> </noscript> ) source = data-###DATAKEY###="###SRC###" source.noTrimWrap = ; ;; source.noTrimWrap.splitChar = ; } } sourceCollection > sourceCollection { src { dataKey = src } small { width = 320 srcsetCandidate = 600w mediaQuery = (max-device-width: 600px) dataKey = small } smallRetina > } }
Wichtig ist, dass Ihr ein „Blank – Image“ mit einbaut.
Das JavaScript wird soweit schon auf der T3N Seite beschrieben, aber das sieht dann so aus:
$(document).ready(function() { $(".lazyload").unveil(); })
Eure Meinung zu dem Artikel ist gefragt! Schreibt mir ein Kommentar
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!
Sebastian
hallo, ins normale setup muss du den code einbinden.
d.h. du musst erst einmal das IMG auslesen:
http://www.typo3-probleme.de/2014/04/27/typo3-6-2-x-image-auslesen/
ich hoffe das hilft weiter. VG
Sebastian
Hallo Sebastian,
ich wollte mich gerade mit dem Thema Lazy Loading beschäftigen und habe dabei Deinen Blogbeitrag zu unveil gefunden. Eine Frage jedoch:
Wo sollte der Code eingebaut werden, im normalen Typoscript-Setup (setup.ts) oder in der Page-TS-Config? Das konnte ich aus dem Codesnippet nicht erkennen und meine Tests haben keine Auswirkungen gezeigt.
Danke im Voraus!
Viele Grüße
Sebastian