Question

我正在使用picturefill来处理响应式图像，而royalslider则使用了这些图像中的滑块。首先加载Picturefill，然后加载royalslider。

但是，我怀疑royalslider在picturefill完成之前开始执行，因为royalslider在完成后无法检测到picturefill实现的类（“rsImg”类）。

<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 -->

在</BODY>之前初始化royalslider：

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

其中包含：

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
        }
    });  
});

我试过加载royalslider：

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

这有效，但它显示了一个非常丑陋的FOUC。有没有办法链接这些脚本的执行（并且仍然将它们分开），以便它们在前一个脚本完成之前不会启动，但仍然尽可能快地执行？

Answer 1

好吧，我做了什么（因为picturefill没有提供任何原生的回调挂钩），添加了这里建议的picturefill_complete触发器：https://github.com/scottjehl/picturefill/issues/53。

这样，我可以在picturefill完成后立即初始化royalslider ，并且不再有FOUC。

延迟执行脚本直到前一个脚本完成

1 个答案: