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

与开发者联系......所以他给了一些提示。其中之一是确保在滑块之前初始化picturefill。至少我认为，这意味着picturefill.js需要在royalslider文件之前加载。

但仍然没有运气。哦，恩在代码中做了一点改动：

<div class="rsIMG">

不遵循滑块语法。

Answer 1

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

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

RoyalSlider加价：这是我使用的代码

<div class="royalSlider rsDefault"> <picture>  <source srcset="img/gsa-01.jpg" media="(min-width: 768px)"> <source srcset="img/gsa-01-smallest.jpg, img/gsa-01-smallest@2x.jpg 2x">  <img class="rsImg" srcset="img/gsa-01-smallest.jpg, img/gsa-01-smallest2x.jpg 2x" alt="GSA Est. 1935"> </picture>  </div>

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

现在，为了一起使用RoyalSlider和picturefill，您必须确保图片填充已经遍历页面并在正确的src属性中添加到img标记中，然后才让RoyalSlider执行此操作＆＃39的事情。为此，请将您常用的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 ); }

这就是我使用它的方式，它是一种为手机提供滑块的绝佳方式 - 尤其是全宽滑块。我不需要在3G手机上加载~400kb的全宽图像，而是可以提供~80kb的图像：）

Royalslider和Picturefill.js

1 个答案: