Royal滑块与Picturefill.js

Question

我正在创建一个有皇家滑翔机HTML版本的网站。我想使用图片填充加载为当前分辨率查看的图像优化。但我很难让它起作用。当我通过一个普通的WP_Query提供图像时，它可以工作。

我读过这篇线程，但这对我没有帮助，有谁想过吗？

谢谢，/Paul

<div id="featuredAdv" class="royalSliderAdv rsMinW">

    <?php 

        $args_featured_adv = array(
            'posts_per_page' => -1,
            'orderby' => 'rand',
            'post_type' => 'advertenties',
            'meta_key' => 'advertentiepositie',
            'meta_value' => 'Featured'
        );

        $adv_featured = new WP_Query( $args_featured_adv );

        if( $adv_featured->have_posts() ): while ( $adv_featured->have_posts() ) : $adv_featured->the_post();

    ?>

    <a href="<?php the_field('link'); ?>" target="_blank" onClick="return recordOutboundLink(this, ['<?php the_title(); ?>', '<?php the_field('link'); ?>']);">

        <div class="rsContent">

                <?php

                    $attachment_id_ft = get_field('afbeelding');
                    $small_ft = wp_get_attachment_image_src( $attachment_id_ft, 'adv-b-small-small' ); // returns an array
                    $default_ft = wp_get_attachment_image_src( $attachment_id_ft, 'adv-b-small-default' ); // returns an array
                    $large_ft = wp_get_attachment_image_src( $attachment_id_ft, 'adv-b-small-large' ); // returns an array

                ?>

                <span data-picture data-alt="<?php the_title_attribute( array( 'before' => 'Photoq.nl: ', 'after' => '' ) ); ?>">
                    <span data-src="<?php echo $default_ft[0]; ?>"></span>
                    <span data-src="<?php echo $small_ft[0]; ?>" data-media="(min-width: 400px)"></span>
                    <span data-src="<?php echo $default_ft[0]; ?>" data-media="(min-width: 768px)"></span>
                    <span data-src="<?php echo $large_ft[0]; ?>" data-media="(min-width: 1200px)"></span>

                    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
                    <noscript>
                        <img src="<?php echo $default_ft[0]; ?>" alt="">
                    </noscript>
                </span>

        </div>

    </a>

    <?php endwhile; endif; wp_reset_query(); ?>

</div> <!-- end #featuredAdv -->

<script>
    jQuery(document).ready(function($) {
        $('#featuredAdv').royalSlider({
            arrowsNav: false,
            loop: false,
            controlsInside: false,
            imageScaleMode: 'none',
            imageScalePadding: 0,
            arrowsNavAutoHide: false,
            autoScaleSlider: true,
            autoScaleSliderWidth: 270,
            autoScaleSliderHeight: 572,
            controlNavigation: 'bullets',
            numImagesToPreload: 1,
            thumbsFitInViewport: false,
            navigateByClick: true,
            startSlideId: 0,
            autoPlay: false,
            transitionType: 'move',
            globalCaption: true
        });
    });
</script>

编辑: 28-06 09:40

与开发商取得联系..。所以他给了一些建议。其中之一是在滑块之前确保图片重新初始化。他的意思是，至少我认为，picturefill.js需要在版税滑块文件之前加载。

但还是没有运气。欧恩在代码中做了一些小改动，因为：

<div class="rsIMG">

不遵循滑块语法。

Answer 1

我今天设法让RoyalSlider与Picturefill2一起工作，但是您需要编辑picturefill.js文件的一个部分，以阻止它在调整窗口大小时重新计算。我刚刚在RoyalSlider论坛中输入了一些说明，但我也会在这里复制，以防它帮助其他人。

首先，您必须从picturefill.js的http://scottjehl.github.io/picturefill/#download抓取。然后在文档的HEAD中加载脚本文件，而不仅仅是在body标记之前。如果需要旧的浏览器支持，即不支持HTML5元素的浏览器，则需要按照这里的说明创建picture元素。或者，您可以在您的项目中包括现代派(我已经在使用现代化，所以我就是这样做的)。

RoyalSlider标记:下面是我使用的代码

     `<div class="royalSlider rsDefault">             <picture>                 <!--[if IE 9]><video style="display: none;"><![endif]-->                 <source srcset="img/gsa-01.jpg" media="(min-width: 768px)">                 <source srcset="img/gsa-01-smallest.jpg, img/gsa-01-smallest@2x.jpg 2x">                 <!--[if IE 9]></video><![endif]-->                 <img class="rsImg" srcset="img/gsa-01-smallest.jpg, img/gsa-01-smallest2x.jpg 2x" alt="GSA Est. 1935">             </picture>             <!-- etc... -->         </div>` 

它一开始看上去有点混乱，但它很容易理解，所有这些都是在picturefill网页上解释的，但基本上第一个<source>元素应该始终是您所要提供的图像的最高质量版本，并使用媒体查询来指定它何时应该加载。因此，在上面的示例中，在<768 is，GSA-01-最小的加载。如果设备像素比大于1，则加载gsa-01-smallest2x.jpg，直到最后如果设备像素比为1，则加载gsa-01-smallest.jpg。IE9包装器只是IE9支持的一个技巧。

现在，为了同时使用RoyalSlider和picturefill，您必须确保picturefill已经在页面中运行并在img标记中添加了正确的src属性，然后才让RoyalSlider执行它的操作。为了做到这一点，将您通常使用的jQuery(document).ready(function($) { $(".royalSlider").royalSlider({...代码放入一个名为defer.js的文件中。现在，就在文档的最后标记之前，但是显然在jQuery和Royalslider脚本标记之后，使用以下代码(称为脚本)：

 `<script type="text/javascript">         function downloadJSAtOnload() {             var element = document.createElement("script");             element.src = "js/defer.js";             document.body.appendChild(element);         }         if (window.addEventListener)             window.addEventListener("load", downloadJSAtOnload, false);         else if (window.attachEvent)             window.attachEvent("onload", downloadJSAtOnload);         else window.onload = downloadJSAtOnload;     </script>` 

这表示等待页面加载其他所有内容，然后应用该脚本(从js/defer.js).加载)。

这非常好，直到你意识到，当你调整窗口的大小时，一切都会破裂(FML!)。这是因为picturefill中有一段代码，使它在每次调整窗口大小时都会再次交换图像，这在RoyalSlider中根本不起作用。因此，要阻止这种情况的发生，请打开picturefill.js，找到这段代码并注释掉它(在第250行左右)：

     `if( w.addEventListener ){             var resizeThrottle;             w.addEventListener( "resize", function() {                 w.clearTimeout( resizeThrottle );                 resizeThrottle = w.setTimeout( function(){                     picturefill({ reevaluate: true });                 }, 60 );             }, false );         }` 

这就是我如何让它工作，这是一个奇妙的方式为手机提供滑块-特别是一个全宽度滑块。我不需要在3G手机上加载一个~400 on的全宽图像，我可以提供一个~80 on的图像代替:)