php - Royalslider 和 Picturefill.js

Question

我正在创建一个网站，其中包含 Royal Slider HTML version 。我想使用picturefill加载针对当前查看的分辨率优化的图像。但我在让它发挥作用时遇到了问题。当我通过普通的 WP_Query 提供图像时它可以工作。

我读过这篇文章thread ，但这对我没有帮助，有人有想法吗？

谢谢，/保罗

<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

与开发人员取得了联系...所以他给出了一些提示。其中之一是确保图片填充在 slider 之前初始化。他的意思是，至少我认为，picturefill.js 需要在Royalslider 文件之前加载。

不过还是没有运气。哦，恩对代码做了一些更改:

<div class="rsIMG">

不遵循 slider 语法。

Answer 1

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

首先你必须从http://scottjehl.github.io/picturefill/#download获取picturefill.js 。然后将脚本文件加载到文档的 HEAD 中，而不是在正文标记之前。如果您需要旧版浏览器支持，即不支持 HTML5 元素的浏览器，则需要按照说明 here 进行操作。创建 picture元素。或者，您可以将 Modernizr 包含在您的项目中(我已经在使用 Modernizr，所以我就是这么做的)。

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>


一开始看起来有点乱，但很容易理解，并且在图片填充网页上都有解释，但基本上是第一个 <source>元素应该始终是您平移要提供的图像的最高质量版本，通过媒体查询指定何时加载。因此，在上面的示例中，在 < 768px 处，加载了 gsa-01-smallest。如果设备的设备像素比 > 1，则加载 gsa-01-smallest2x.jpg，直到最后如果设备像素比为 1，则加载 gsa-01-smallest.jpg。IE9 包装器只是 IE9 支持的一个技巧。

现在，为了同时使用 RoyalSlider 和 picturefill，您必须确保 picturefill 已遍历页面并添加到正确的 src 中。属性到 img 标签，然后再让 RoyalSlider 做它的事情。为此，请将您常用的 Royalslider 代码 ( jQuery(document).ready(function($) {
$(".royalSlider").royalSlider({... ) 放入名为 defer.js 的文件中。 。现在，在文档的最终标签之前，但显然在 jQuery 和 Royalslider js 脚本标签之后，使用以下代码(称为 Google Defer js 脚本):


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


这就是我让它工作的方式，这是一种为手机提供 slider 的绝佳方式 - 特别是全宽 slider 。我不必在 3G 手机上加载 ~400kb 全宽图像，我可以提供 ~80kb 图像:)