page loading and priority

I have a page with a lot of galleries (using galleria plus fancybox ) and an image slider on top (nivo slider). The problem is that the slider take time to load, cause the browser is loading the galleries meanwhile. Now i would like to give the slider a priority ,so the page would have at least it's structure built, or maybe, let the galleries load only on click.

<script type="text/javascript"><!--fancybox-->
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>

<script type='text/javascript'>
            Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
            Galleria.run('#gallery-1,#gallery-2,#gallery-3,#gallery-4,#gallery-5,#gallery-6,#gallery-7,#gallery-8,#gallery-9,#gallery-10,#gallery-11,#gallery-12,#gallery-1b,#gallery-2b,#gallery-3b,#gallery-4b');
 </script>

Solution

Instead of using document.ready(), which loads when the HTML has been loaded, you could try using window.onload, which occurs after all the elements on the page have been loaded.

$(window).on("load", function(){
   $(".fancybox").fancybox();
});

Then, if you want to load the galleries on a click event:

$('relevantIDHere').on('click', function(){
  Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
  Galleria.run('#gallery-1,#gallery-2,#gallery-3,#gallery-4,#gallery-5,#gallery-6,#gallery-7,#gallery-8,#gallery-9,#gallery-10,#gallery-11,#gallery-12,#gallery-1b,#gallery-2b,#gallery-3b,#gallery-4b'); 
});