Question

有人经历过使用Swiper 3和lazysizes。虽然Swiper有自己的延迟加载机制，但我需要将它与sourcesets一起使用。但不知道如何开始所以，如果有人对我有暗示提前谢谢

Answer 1

知道了。因此，将Swiper 3与lazysizes结合起来似乎很安静。要点是以正确的顺序包含脚本。

置于头

<style>
  .lazyload,
  .lazyloading {
    opacity: 0;
  }
  .lazyloaded {
    opacity: 1;
    transition: opacity 300ms;
  }
</style>

<script src="bower_components/respimage/respimage.js"></script>
<script src="bower_components/lazysizes/lazysizes.js" async=""></script>

<script>
    window.lazySizesConfig = window.lazySizesConfig || {};
    window.lazySizesConfig.loadMode = 1;
    // my custom Media Queries
    window.lazySizesConfig.customMedia = {
        '--small': '(max-width: 640px)',
        '--medium': '(min-width: 641px) and (max-width: 768px)',
        '--large': '(min-width: 769px) and (max-width: 1024px)'
    };
 </script>

<强> HTML

<div class="swiper-container">
<div class="swiper-wrapper">
    <div class="swiper-slide">
        <figure class="lazyload">
            <picture>
                <source data-srcset="a-1.jpg 1x, a-2.jpg 1.5x, a-3.jpg 2x" media="--medium">
                <source data-srcset="b-1.jpg 1x, b-2.jpg 1.5x, b-3.jpg 2x" media="--large">
                <source data-srcset="c-1.jpg 1x, c-2.jpg 1.5x, c-3.jpg 2x" media="--small">
                <img data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="d-1.jpg 1x, d-2.jpg 1.5x, d-3.jpg 2x" class="lazyload">
            </picture>
            <script>window.respimage&&window.respimage({elements:[document.images[document.images.length-1]]})</script>
        </figure>
    </div>

    <div class="swiper-slide">
        <figure class="lazyload">
            <picture>
                <source data-srcset="e-1.jpg 1x, e-2.jpg 1.5x, e-3.jpg 2x" media="--medium">
                <source data-srcset="f-1.jpg 1x, f-2.jpg 1.5x, f-3.jpg 2x" media="--large">
                <source data-srcset="g-1.jpg 1x, g-2.jpg 1.5x, g-3.jpg 2x" media="--small">
                <img data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="h-1.jpg 1x, h-2.jpg 1.5x, h-3.jpg 2x" class="lazyload">
            </picture>
            <script>window.respimage&&window.respimage({elements:[document.images[document.images.length-1]]})</script>
        </figure>
    </div>
</div>

<div class="swiper-pagination swiper-pagination-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>

关闭正文

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/swiper/dist/js/swiper.jquery.js"></script>
<script>

    var swiper = new Swiper('.swiper-container', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        pagination: '.swiper-pagination',
        paginationClickable: true,
        preloadImages: false,
        lazyLoading: false,
        observer: true,
        autoplay: 4000,
        autoplayDisableOnInteraction: true,

        onSlideChangeEnd: function(swiper) {
            activeSlide = swiper.slides.eq( swiper.activeIndex );
            slideLazy = activeSlide.find( $( '.image-inview' ) );

            // disable Autoplay during Image preload
            if (slideLazy.hasClass('lazyload')) {
                swiper.stopAutoplay();
            }
        }
    });

    // Capture load Event, will be fired when Image is Ready
    document.addEventListener('load', (function() {
        var onLoad = function() {
            swiper.startAutoplay();
        };

        return function(e) {
          $(e.target).filter('.image-inview').each(onLoad);
        };
    })(), true);
</script>

现在这也适用于自动播放。

Swiper 3带有lazysizes

1 个答案: