Stephan Romhart über Technik, Kultur und Philosophie

Philosophie · Technik

fullpage.js / jQuery – Lazy-loading-Ansatz mit Fade-In für Bilder

Stephan 0

Mit dem auf jQuery basierenden Website-Javascript-Plugin von Alvaro Trigo kann man einfach Powerpoint-ähnliche Websites erstellen. Er selbst bezeichnet fullpage.js als ein Werkzeug zur Schaffung von "beautiful fullscreen scrolling websites". Aktuell unterstützt das Skript einen Lazy-Loading-Ansatz für Bilder, leider ohne dass die Bilder nach dem Laden eingefadet oder anders animiert eingeblendet werden. Ich habe mir daher Gedanken gemacht, wie ich dieses Thema angehe. Den Ansatz zeige ich im folgenden Artikel.

Der Aufbau

Du solltest wissen, wie man jQuery und fullpage.js in Html einbindet. Ich erläutere schematisch, wie ich das Lazy-Loading in fullpage.js integriere.

1.
Prototyp für das Laden und Einfaden des Bildes erstellen

2.
Definition der Events für das Lazy-Loading bei der Initialisierung von fullpage.js

3.
Im Html die Img-Tags mit einem data-src-Attribut versehen

1. Der Prototyp für das Laden und Einfaden des Bildes

Mit dem Prototypen will ich ein immer gleiches Verhalten für das Lazy-Loading erhalten. Das Skript erzeugt ein nicht sichtbares Image mit der gelieferten Url und triggert nach dem Laden das Einfaden. Das Image in der Figure sollte eine opacity:0 im CSS haben. Das parent() bezieht sich immer auf eine Figure, da ich Lazy-Loading-Images immer in Figures stecke. Der Loader ist optional. Ich finde es aber einfach gut, wenn ich sehe, da kommt noch etwas. Nach dem Einfaden entferne ich noch das "data-src"-Attribut und den Loader mit remove(). Anstatt das Bild einzublenden, kann auch jeder andere Effekt, der Javascript zulässt, verwendet werden.

/* Lazy-Loading-Prototyp */
$.fn.lazyLoad = function(url){
	var $image = this;
	$image.parent().append('<div class="loader"></div>');
	var $downloadingImage = $('<img>');
	
	$downloadingImage.load(function(){
		$image.attr('src',url);
		$image.animate({ opacity: 1 }, 1000, function(){
			$image.removeAttr('data-src');
			$image.parent().find('.loader').remove();
		});
	});
	$downloadingImage.attr('src',url);
	
	return this;
}

2. Definition der Events für das Lazy-Loading bei der Initialisierung von fullpage.js

Das Code-Beispiel unten zeigt die Minimalkonfiguration für fullpage.js mit eigenem Lazy-Loading. Über "lazyLoading:false" muss das mitgelieferte Lazy-Loading deaktiviert werden. Bei den Events "afterLoad" und "afterSlideLoad" kommt der Prototyp zum Einsatz. Im Event "afterLoad" prüfe ich, ob die Sektion Slides hat oder nicht. Wenn die Sektion Slides hat, prüfe ich den ersten Slide auf Img-Tags, die ein data-src-Attribut besitzen, ansonsten suche ich direkt in der Sektion. Bei Sektionen die mehrere Slides haben, definiere ich mit dem Event "afterSlideLoad" für die Slides 2 bis n das Lazy-Loading.

$(document).ready(function(){
	$('#fullpage').fullpage({
		lazyLoading:false,
		afterLoad:function(anchorLink,index)
		{
			var $sectionId = $(this).attr('id');
				
			/* Sektion hat Slides */
			if($('#'+$sectionId+' .slide').length)
			{
				$('#'+$sectionId+' .slide').first().find('img').each(function(i)
				{
					if($(this).data('src'))
					{
						$(this).lazyLoad($(this).data('src'));
					}
				});
			}
			/* Sektion hat keine Slides */
			else
			{
				$('#'+$sectionId).find('img').each(function(i)
				{
					if($(this).data('src'))
					{
						$(this).lazyLoad($(this).data('src'));
					}
				});
			}
		},
		/* Bei Sektionen mit Slides ab Slide 2 */
		afterSlideLoad:function(anchorLink,index,slideAnchor,slideIndex)
		{
			$(this).find('img').each(function(i)
			{
				if($(this).data('src'))
				{
					$(this).lazyLoad($(this).data('src'));
				}
			});
		}
	});
});

3. Im Html die Img-Tags mit einem data-src-Attribut versehen

Der Vollständigkeit halber noch zwei Code-Beispiele, wie ich das Html fürs Lazy-Loading angepasst habe. Noch wichtig: damit mein Skript funktioniert, benötigt jede Sektion eine Id.

...
<div id="fullpage">
	<div class="section" id="sektion-1">
		<figure><img src="spacer.png" alt="" data-src="bilddatei.png" /></figure>
	</div>
</div>
...
...
<div id="fullpage">
	<div class="section" id="sektion-1">
		<div class="slide">
			<figure><img src="spacer.png" alt="" data-src="bilddatei.png" /></figure>
		</div>
	</div>
</div>
...

Mich würde interessieren, ob der Ansatz gut ist, oder ob man das noch einfacher oder besser umsetzen kann. Ein funktionierendes Beispiel findest Du hier:
http://www.stephan-romhart.de/demos/fullpage-lazy-loader

Weiterführende Links