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

Hat Euch der Artikel weitergeholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!

Hat Euch der Artikel weitergeholfen oder gefallen? Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!Ich bin freiberuflicher TYPO3-Entwickler, Web-Entwickler und Frontend-Entwickler. Ich arbeite im und für das Web etwas mehr als 12 Jahre. Mehr Infos zu der TYPO3 Internetagentur - INGENIUMDESIGN.

Leave a Reply

2 Kommentare

  1. 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

Next ArticleTYPO3 - fluid if Condition HMENU ausblenden