Prioritizing window.load functions

Question

Sorry if this is a noob question (I'm a JS noob). Im working on a website in which the homepage consists of a preloader and a slideshow.

I've managed to set up both the preloader and the slideshow. However, I've noticed that both of them are being loaded at the same time. I need to find a way to first load the preloader and once the preloading is done, then start the slideshow.

I'm using (window).load on both functions but I would like to know if there's a way to prioritize how things area loaded.

Here's my working code:

jQuery(window).load(function() { 

  jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");

  setTimeout(wptime_plugin_remove_preloader, 3000);
  function wptime_plugin_remove_preloader() { 
  jQuery('#wptime-plugin-preloader').remove();
  }

});

jQuery(window).load(function() {

  $('#slideshow.royalSlider').royalSlider({
    arrowsNav: true,
    loop: true,
    keyboardNavEnabled: true,
    controlsInside: false,
    imageScaleMode: 'fill',
    arrowsNavAutoHide: false,
    autoScaleSlider: false, 
    numImagesToPreload: 0,
    transitionSpeed: 600,
    thumbsFitInViewport: false,
    navigateByClick: false,
    startSlideId: 0,
    transitionType:'fade',
    globalCaption: false,

  });

});

Regards,

Johann

Answer 1

You can combine them both inside a single jQuery(window).load, and choose to run the royalSlider setup function inside the wptime_plugin_remove_preloader function, after removing the preloader:

jQuery(window).load(function() { 
  //set up the preloader
  jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");

  setTimeout(wptime_plugin_remove_preloader, 3000);

  function wptime_plugin_remove_preloader() { 
      //Remove the preloader
      jQuery('#wptime-plugin-preloader').remove();

      //Set up the slider after removing the preloader
      $('#slideshow.royalSlider').royalSlider({
        arrowsNav: true,
        loop: true,
        keyboardNavEnabled: true,
        controlsInside: false,
        imageScaleMode: 'fill',
        arrowsNavAutoHide: false,
        autoScaleSlider: false, 
        numImagesToPreload: 0,
        transitionSpeed: 600,
        thumbsFitInViewport: false,
        navigateByClick: false,
        startSlideId: 0,
        transitionType:'fade',
        globalCaption: false,

      });
    }
});