Php Royalslider和Picturefill.js

我正在创建一个网站，其中有。我想使用加载针对当前查看的分辨率优化的图像。但我很难让它发挥作用。当我通过一个普通的WP_查询为图像提供服务时，它就工作了

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

谢谢，保罗

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

jQuery（文档）.ready（函数（$）{
$（'#featuredAdv'）。royalSlider({
阿罗斯纳夫：错，
循环：false，
控制侧：错误，
imageScaleMode:“无”，
imageScalePadding:0，
arrowsNavAutoHide:错误，
自动缩放滑块：对，
自动缩放滑块宽度：270，
自动缩放滑块高度：572，
controlNavigation:“项目符号”，
numimagestopload:1，
ThumbsFitView端口：false，
导航时钟：是的，
StartSlided:0，
自动播放：错误，
transitionType:“移动”，
环球卡普顿：对
});
});

编辑：28-06 09:40

与开发人员取得联系。。。所以他给了一些建议。其中之一是确保picturefill在滑块之前初始化。他这样说的意思是，至少我认为，picturefill.js需要在royalslider文件之前加载

但还是没有运气。Oh en在代码中做了一些更改，原因是：

<div class="rsIMG">

---

不遵循滑块语法。

我今天设法让RoyalSlider使用picturefill 2，但您需要编辑picturefill.js文件的一部分，以停止在调整窗口大小时重新计算。我刚在表格里打了一些说明，但我也会抄到这里，以防对其他人有所帮助

首先，您必须从中获取picturefill.js。 然后将脚本文件加载到文档的头中，而不仅仅是在body标记之前。 如果需要旧浏览器支持，即不支持HTML5元素的浏览器，则需要按照说明创建

图片
元素。或者，您可以在项目中包括Modernizer（我已经在使用Modernizer了，所以我就是这样做的）

滚动条标记：
这是我使用的代码



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

现在，为了同时使用RoyalSlider和picturefill，您必须确保picturefill已在页面中运行并在img标记中添加了正确的
src
属性，然后才能让RoyalSlider执行此操作。为了做到这一点，请将您常用的代码放在royalslider（
jQuery（document）.ready（函数（$）{
$（“.royalSlider”）.royalSlider（{…
）放入名为
defer.js
的文件中。现在，就在文档的最后标记之前，但显然在jQuery和royalSlider js脚本标记之后，使用以下代码（称为Google defer js脚本）：


函数downloadJSAtOnload（）{
var元素=document.createElement（“脚本”）；
element.src=“js/defer.js”；
document.body.appendChild（元素）；
}
if（window.addEventListener）
addEventListener（“加载”，downloadJSAtOnload，false）；
else if（窗口附件）
window.attachEvent（“onload”，downloadJSAtOnload）；
else window.onload=下载jsatonload；

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

这工作得非常好，直到你意识到当你调整窗口大小时，一切都碎了（FML！）。这是因为picturefill中有一段代码，每次调整窗口大小时，它都会再次调出图像，这对RoyalSlider根本不起作用。因此，要阻止这种情况发生，请打开picturefill.js，找到这段代码并对其进行注释（大约在第250行）：


if（w.addEventListener）{
var resizeThrottle；
w、 addEventListener（“调整大小”，函数（）{
w、 clearTimeout（resizeThrottle）；
resizeThrottle=w.setTimeout（函数（）{
picturefill（{重新评估：true}）；
}, 60 );
}，假）；
}

这就是我如何让它工作的，这是一种为手机提供滑块的奇妙方式，尤其是全宽滑块。我不必在3G手机上加载~400kb的全宽图像，我可以提供~80kb的图像：）
我今天设法让RoyalSlider使用picturefill 2，但您需要编辑picturefill.js文件的一部分，以停止在调整窗口大小时重新计算。我刚刚在中键入了一些说明，但我也将复制到这里，以防它对其他人有所帮助

首先，您必须从中获取picturefill.js。
然后将脚本文件加载到文档的头中，而不仅仅是在body标记之前。
如果您需要旧的浏览器支持，即不支持HTML5元素的浏览器，则需要按照说明创建
图片
元素。或者，您可以在项目中包含Modernizer（我已经在使用Modernizer，所以我就是这样做的）

滚动条标记：
这是我使用的代码