CODEWITHSUNDEEP
javascriptjquery
user1694077
user1694077

Reputation:

Delay execution of a script until the previous one finishes

I'm using picturefill for responsive images, and royalslider to make a slider out of these images. Picturefill is loaded first, and then royalslider.

However, I suspect royalslider starts executing before picturefill finishes, because royalslider fails to detect the classes that picturefill implements after it is done (the "rsImg" classes).

<HEAD>
  <!-- Javascript -->
  <script src="[[++site_url]]assets/js/matchmedia.js" type="text/javascript"></script>
  <script src="[[++site_url]]assets/js/picturefill.js" type="text/javascript"></script>
  <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

  <!-- Begin Royalslider -->
    <!-- basic stylesheet -->
    <link rel="stylesheet" href="[[++site_url]]assets/royalslider/royalslider.css">

    <!-- skin stylesheet (change it if you use another) -->
    <link rel="stylesheet" href="[[++site_url]]assets/royalslider/skins/default/rs-default.css"> 

    <!-- main slider js script file --> 
    <!-- create it with slider online build tool for better performance -->
    <script src="[[++site_url]]assets/royalslider/jquery.royalslider.min.js"></script>
  <!-- End Royalslider -->

Initialize royalslider just before </BODY>:

<!-- Initialize Royalslider -->
<script src="[[++site_url]]assets/royalslider/init.royalslider.js" type="text/javascript"></script>

Which contains:

jQuery(document).ready(function($) {
    $(".royalSlider").royalSlider({
        // options go here
        autoScaleSlider: true,
        imageScaleMode: 'fit-if-smaller',
        // enable fullscreen
        fullscreen: {
          // fullscreen options go here
          enabled: true,
          nativeFS: true
        }
    });  
});

I've tried loading royalslider with:

$(window).load(function() {
     // initialize slider
     $('.royalSlider').royalSlider({});
});

And that works, but it shows a very ugly FOUC. Is there a way to chain the execution of these scripts (and still keep them separate) so they don't start before the previous one is finished, but still execute as fast as possible?

Upvotes: 0

Views: 1002

Answers (1)

user1694077
user1694077

Reputation:

Allright, what I did (since picturefill doesn't provide any native callback hooks), is add the picturefill_complete trigger suggested here: https://github.com/scottjehl/picturefill/issues/53.

That way, I can initialize royalslider immediately after picturefill has completed, and there is no more FOUC.

Upvotes: 2

Related Questions