Jak vložit fancybox aby načítal jen když je potřebný

Proč Fancybox?

Pokud hledáte lightbox, který má zobrazovat obrázky nebo videa, pak fancybox je jednoznačně jedna z nejlepších knihoven. Ptáte se proč? Nikdy mě nezklamal, jeho design je čistý a přehledný, existuje řadu let, je snadno použitelný a má véééélikou spoustů možností.

Fancybox se snaží být univerzálním řešením pro všechny vyskakovací okna. Umí otevírat obrázky, videa, youtube videa, dokonce i vlastní html fragmenty. S tím se pojí velikost této knihovny, která je poměrně veliká.

Údaje o velikosti knihovny:
Minifikovaný javascript má cca 69kB, což je sakra dost. Je to téměř celá jQuery knihovna.
Minifikovaný css soubor má cca 15kB, což taky není zrovna málo.

Problém

Chceme použit jednoduchý lightbox, který nebude zpomalovat web na němž je použit.

Analýza problému

Co škodí webu? Vložení kódu, který na stránce není použit. Ano! To je ono! Nesmíme css a js kód fancyboxu vložit na každou stránku, protože ho nepotřebujeme všude, ale pouze na některých místech / stránkách.

Možné řešení

Řešením je, vkládat knihovnu pouze na stránky kde ho potřebujeme. Nabízí se zde řešení na back-endu, kde napíšeme podmínky a fancybox vložíme pouze na stránku Y nebo Z.

Jo to by asi šlo..

Ale jde to ještě lépe!

Pokud stránka Y potřebuje fancybox, pak ho do něj vložíme. Úskalí tohoto řešení je v tom, že stránku Y zpomalíme. Ačkoliv nezpomalujeme celý web, protože fancybox vkládáme pouze na stránku Y, zpomalíme pouze tuto konkrétní stránku, protože fancybox se musí stáhnout při načtení..

Uveďme si to na příkladu.

A protože koťátka jsou moc pěkná, chceme je vidět pořádně ve velkém, rozklikneme fotku a zobrazí se nám fancybox s velkou fotkou nebo videem.

Taky jste si toho všimli? Až do chvíle zobrazit ve velkém, fancybox nebyl potřebný. Tudíž správně bychom ho neměli mít stažený.

Fancybox s lazyloadingem

Technika lazyloadingu spočívá v načtení něčeho až ve chvíli, kdy to – v našem případě Fancybox opravdu potřebujeme.

Proto jsem napsal vlastní javascript, který načte fancybox až po kliknutí na zvětšit. A aby to působilo rychle, přednačteme ho již po najetí.

Kód vypadá následovně:

		$(function() {
  function doFancyboxFunctions(event) {
    var loadFancybox = function() {
      if ($("#fancybox-css").length < 1) {
        //load css
        var head = document.getElementsByTagName("head")[0];
        var link = document.createElement("link");
        link.id = "fancybox-css";
        link.rel = "stylesheet";
        link.type = "text/css";
        link.href = "https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"; //"/assets/css/fancybox.css";
        link.media = "all";
        $(head).prepend(link);
      }

      if ($("#fancybox-js").length < 1) {
        //load script
        var resource = document.createElement("script");
        resource.async = "true";
        resource.src = "https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"; //"/assets/js/fancybox.js";
        resource.id = "fancybox-js";
        var script = document.getElementsByTagName("script")[0];
        script.parentNode.insertBefore(resource, script);
      }
    };

    var setupFancybox = function() {
      $("[data-fancybox]").fancybox();
    };

    var isFancyboxLoaded = function() {
      return $("html").hasClass("fancybox-css-loaded") && $("html").hasClass("fancybox-js-loaded");
    };

    var startFancybox = function() {
      $("html").addClass("fancybox-is-loaded");

      //nepokracuj pokud css nebo js neni nacteny
      setupFancybox();
      if (event && event.type === "click") {
        $(event.target).click();
        $(window).resize();
      }
      return true;
    };

    if (event && event.type === "click" && isFancyboxLoaded() === false) event.preventDefault();

    if (!isFancyboxLoaded()) {
      loadFancybox();

      $("#fancybox-css").on("load", function() {
        $("html").addClass("fancybox-css-loaded");
        if (isFancyboxLoaded()) startFancybox();
      });

      $("#fancybox-js").on("load", function() {
        $("html").addClass("fancybox-js-loaded");
        if (isFancyboxLoaded()) startFancybox();
      });
    }
  }

  $("[data-fancybox]").one("click mouseenter", function(event) {
    doFancyboxFunctions(event);
  });

  //pokud existuje hash po nacteni stranky
  if (window.location.hash) {
    var hash = window.location.hash.substr(1);
    var getFancyboxSelector = function () {
      var selector = hash.split('-');
      selector.pop();

      return selector.join('-');
    };
    //najdi elementy, ktere by mohly odpovidat fancybox elementum
    var fancyboxElementsWithCurrentHash = $('[data-fancybox^="' + getFancyboxSelector() + '"]');
    //pokud takove elementy existuji nacti fancybox a otevri prislusny objekt
    if (fancyboxElementsWithCurrentHash.length > 0) doFancyboxFunctions();
  }
});

	

Tento kód vložíme do souboru fancybox-lazyloading.js a ten můžeme mít na každé stránce.

Podrobnější popis funkcí

Pokud na stránce existuje element s atributem data-fancybox, což je atribut pro aktivaci fancyboxu, pak hlídej 2 události: kliknutí a najetí myši na tyto elementy vyžadující fancybox. Obě události stáhnou css a js soubory Fancyboxu. Následně je Fancybox přípravený k otevření v případě najetí nebo se rovnou otevře pokud jsme klikli.

Dále funkce hlídá hash. Pokud je stránka otevřená s #hashtagem a tak načteme fancybox a otevřeme obrázek s příslušným id.

Co se dá ještě vylepšit

Doporučuji fancybox stáhnout k sobě, a místo linků na CDN uvádět linky na soubory umístěné na vašem serveru. Nejste pak závislí na funkčnosti CDN.

Čeho jsme dosáhli?

Místo 85kB celé Fancybox knihovny použijeme kód o velikosti cca 3kB. Ten nám načte fancybox kdekoliv na webu ve chvíli, kdy ho opravdu budeme potřebovat.

Fancybox lazyloading v praxi

Otevřete vývojářské nástroje a věnujte pozornost momentu kdy dojde ke stažení knihovny Fancybox.

A ještě něco

Nezapomínejte, že fancybox není zdarma a je třeba zakoupit licenci pro jeho použití na komerčních projektech.