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.
- jQuery
- Moment.js (for date time picker)
- Basecore.js (minified version of a bunch third part scripts i.e bootstrap, lightbox and slider plugin)
- 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
- $(document).ready(function(){
- /*BXSLIDER*/
- $('.slides').bxSlider({
- responsive: true,
- adaptiveHeight: true,
- auto: true,
- mode: 'horizontal',
- infiniteLoop: true,
- speed: 2000,
- pause: 6000,
- startSlide: 0,
- preloadImages: 'all',
- touchEnabled: true,
- pager: true,
- controls: true,
- useCSS:false
- });
- /*lightbox*/
- $('.ilightbox').iLightBox({
- skin: 'metro-black',
- path: 'horizontal',
- fullAlone: 0,
- controls: {
- thumbnail: false,
- arrows: true,
- slideshow: false,
- fullViewPort: 'fill',
- swipe: false,
- mobileOptimizer: true
- }
- });
- /*datepicker*/
- $(function () {
- $('#datetimepicker').datetimepicker();
- $('#datepicker').datetimepicker({
- format: 'DD/MM/YY'
- });
- $('#timepicker').datetimepicker({
- format: 'LT'
- });
- });
- /*menu*/
- $(".menu-btn, .menu-btn-close").click(function(e) {
- e.preventDefault(), $(".sidebar-wrapper, .wrapper, .menu-btn, .close-menu-inside").toggleClass("active")
- });
- });