Advice on Loading third party plugins

Advice on Loading third party plugins

Hi, i'm looking to improve the way i use jquery and third party scripts. At the moment my site structure has all the JS at the bottom of the page including the jquery library.

After jquery i have a couple of other scripts e.g below.

  1. jQuery
  2. Moment.js (for date time picker)
  3. Basecore.js (minified version of a bunch third part scripts i.e bootstrap, lightbox and slider plugin)
  4. core.js (third party plugin functions wrapped in document.ready and any other custom jquery)

Whats the best way to call the functions from the core.js only when there needed - or whats the best way to use these functions - example of my core.js file is below. My main goal is to reduce page load time and make sure im doing it properly.

Any advice welcome

  1. $(document).ready(function(){
  2. /*BXSLIDER*/
  3. $('.slides').bxSlider({
  4.     responsive: true,
  5.     adaptiveHeight: true,
  6.     auto: true,
  7.     mode: 'horizontal',
  8.     infiniteLoop: true,
  9.     speed: 2000,
  10.     pause: 6000,
  11.     startSlide: 0,
  12.     preloadImages: 'all',
  13.     touchEnabled: true,
  14.     pager: true,
  15.     controls: true,
  16.     useCSS:false
  17. });

  18. /*lightbox*/
  19. $('.ilightbox').iLightBox({
  20.     skin: 'metro-black',
  21.     path: 'horizontal',
  22.     fullAlone: 0,
  23.     controls: {
  24.         thumbnail: false,
  25.         arrows: true,
  26.         slideshow: false,
  27.         fullViewPort: 'fill',
  28.         swipe: false,
  29.         mobileOptimizer: true
  30.     }
  31. });

  32. /*datepicker*/
  33. $(function () {
  34.     $('#datetimepicker').datetimepicker();

  35.     $('#datepicker').datetimepicker({
  36.         format: 'DD/MM/YY'
  37.     });

  38.     $('#timepicker').datetimepicker({
  39.         format: 'LT'
  40.     });
  41. });

  42. /*menu*/
  43. $(".menu-btn, .menu-btn-close").click(function(e) {
  44.     e.preventDefault(), $(".sidebar-wrapper, .wrapper, .menu-btn, .close-menu-inside").toggleClass("active")
  45. });
  46. });