0

我正在使用图片填充来响应图像，并使用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 -->

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

<!-- 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。有没有办法链接这些脚本的执行（并且仍然将它们分开），这样它们就不会在前一个脚本完成之前开始，但仍然尽可能快地执行？

4

1 回答 1

2

好吧，我所做的（因为 picturefill 不提供任何本机回调挂钩），是添加此处建议的 picturefill_complete 触发器：https ://github.com/scottjehl/picturefill/issues/53 。

这样，我可以在图片填充完成后立即初始化royalslider ，并且没有更多的FOUC。

于 2013-08-17T12:13:06.047 回答