JavaScript für Slider oder Lightbox etc. nur bei Bedarf laden [jQuery]

Wenn ich einen Bilder-Slider wie z.B. Owl Carousel 2 nutzen möchte, benötige ich zum einen die JavaScript Dateien vom Owl Carousel, sowie den Aufruf wenn alles fertig geladen wurde um den Slider zu initialisieren:

Wenn ich ein CMS wie beispielsweise TYPO3 nutze, dann binde ich die JavaScript Datei einmal im Code ein und sie wird automatisch auf allen Seiten geladen. Nun kommt es aber in der Praxis sehr häufig vor dass der Slider nur auf wenigen Seiten eingebunden, aber trotzdem überall geladen wird.

Zauberwort .getScript()

Im folgenden möchte ich zeigen wie abgefangen werden kann ob ein Slider (oder ein beliebiges anderes Element) auf der Seite existiert. Mit dieser Information lässt sich dann entscheiden ob eine zusätzliche JavaScript Datei geladen werden soll, oder nicht.

In meinem Beispiel nutze ich, wie bereits gesagt, TYPO3. Für alle die TYPO3 nicht nutzen – Jetzt nicht wegklicken, diese Lösung funktioniert natürlich in allen Systemen.

Einbinden eines Sliders

Wenn ich Owl Carousel auf einer Seite einbinden möchte füge ich einfach nur folgenden Code im Kopfbereich ein:

<script src="js/owl.carousel.min.js"></script>

und binde dann meine Bilder innerhalb eines Containers auf die Seite ein:

<div class="owl-carousel">
   <div>
      <img src="bild1.jpg" alt="bild">
   </div>
   <div>
      <img src="bild2.jpg" alt="bild">
   </div>
   <div>
      <img src="bild3.jpg" alt="bild">
   </div>
</div>

Wenn ich nun die Owl Carousel JavaScript Bibliothek auf der Seite geladen habe ist es möglich den Slider durch aufrufen seiner JavaScript-Funktion zu starten. Für gewöhnlich wird der Aufruf wie folgt geschrieben:

$(document).ready(function(){
   $(".owl-carousel").owlCarousel({
      items: 1,
      loop: 1,
      lazyLoad: 1,
      autoplay: 1,
      autoplayTimeout: 5000,
   });
});

Damit sagen wir das der Container mit der Klasse „owl-carousel“ als solcher behandelt werden soll.

Wenn auf einer Seite kein Slider hinzugefügt wird, wird der Code trotzdem ausgeführt und findet keinen Container „owl-carousel“ vor. Blöd ist an dieser Stelle, dass der gesamte Owl Carousel Code auf jeder Seite geladen wird, ob er genutzt wird oder nicht – somit verlangsamt sich natürlich die Ladezeit der Seite und diese wird bekanntlich als wichtiges SEO-Kriterium angesehen.

Also lösche ich die Zuweisung der „js/owl.carousel.min.js“-Datei wieder von der Seite. Diese möchte ich nur dann laden, wenn wirklich ein Slider vorhanden ist.

Bauen wir also den Aufruf ein wenig um:

$(document).ready(function () {
   if ($(".owl-carousel").length >= 1) {
      //Hier Code einfügen :-)
   }
});

Dieser Code durchsucht nun die Seite nach Containern mit der Klasse „owl-carousel„. Dabei gibt $(„.owl-carousel“).length die Anzahl der Gefundenen Container zurück. ist der Wert 0 passiert nichts, wenn der Wert 1 oder größer ist, wird die Funktion ausgeführt.

Die Funktion zum laden einer JavaScript-Datei lautet wie folgt:

$.getScript("js/owl.carousel.min.js", [Callback])

[Callback] steht hier für eine Funktion die ausgeführt wird nachdem die Script-Datei fertig geladen wurde. Dies können wir uns gemeinsam mit dem Slider-Aufruf zu Nutzen machen und nutzen also diesen kompletten Aufruf:

$(document).ready(function () {
   if ($(".owl-carousel").length >= 1) {
      $.getScript("js/owl.carousel.min.js", function () {
         $(".owl-carousel").owlCarousel({
            items: 1,
            loop: 1,
            lazyLoad: 1,
            autoplay: 1,
            autoplayTimeout: 5000,
         });
      });
   }
});

Nun wird geprüft ob ein Container mit „owl-carousel“ existiert, wenn ja dann lade die Datei js/owl.carousel.min.js und wenn diese fertig geladen ist, dann starte den Slider.

Nur für TYPO3

Wenn wir diese Funktion für TYPO3 nutzen wollen können wir im Typoscript die eingebundene JavaScript Datei entfernen. In diesem Beispiel:

page.includeJSFooter {
   js5 = https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js
   js10 = typo3conf/ext/naderioprovider/Resources/Public/Js/OwlCarousel/owl.carousel.min.js
   js15 = typo3conf/ext/naderioprovider/Resources/Public/Js/custom.js
}

Die rote Zeile kann entfernt werden und in der custom.css befindet sich der oben erstellte Code. Wenn die JavaSript Bibliothek vom Slider in eine eigenen Extension hinzugefügt wurde, kann man diese direkt im typo3conf/ext… Verzeichnis ansprechen:

$(document).ready(function () {
   if ($(".owl-carousel").length >= 1) {
      $.getScript("/typo3conf/ext/naderioprovider/Resources/Public/Js/OwlCarousel/owl.carousel.min.js", function () {
         $(".owl-carousel").owlCarousel({
            items: 1,
            loop: 1,
            lazyLoad: 1,
            autoplay: 1,
            autoplayTimeout: 5000,
         });
      });
   }
});

Abschluss

Puh… das war eine Menge Text!
Ich hoffe du hast es bis hier geschafft und konntest das ganze erfolgreich nachbauen.

Ich würde mich über Feedback, Fragen oder Erfolgsmeldungen in den Kommentaren freuen.

Grüße

Naderio / Thomas