1

我需要延迟加载方面的帮助。我在这里使用这个刷卡器（https://github.com/nolimits4web/swiper）在一个设置为自动播放并具有淡入效果的网站上创建一个全屏刷卡器。为了减少加载时间，我还包括了延迟大小（https://github.com/aFarkas/lazysizes），因为在刷卡器中的延迟加载我的字幕不起作用。它们总是重叠的。

但是我现在的问题是它以某种方式加载图像，即使它们不在视点中。我对编码很陌生，所以请与我裸露:) 我在下面发布我的代码，希望有人可以在这里帮助我或解释我需要做什么。非常感谢！

  <div class="swiper-container">
      
    <div class="swiper-wrapper">

        <picture alt="" class="swiper-slide">
                  <source  class="lazyload" media="(max-width:600px)"
                   data-srcset="images/Loremipsum_mobile.jpg"
                  />
                  <source class="lazyload"
                    media="(max-width: 1024px)"
                    data-srcset="images/Loremipsum.jpg"
                  />
                  <img
                    class="lazyload" 
                    data-src="images/Loremipsum.jpg" 
                  />
                  <div class="image_caption">Titel: Lorem Ipsum</div> 
        </picture>

           
    </div>
        

    <!-- Add Arrows -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
      
    <div class="navbar">
       <a href="4s_impressum.html" id="desktop" >Impressum & Datenschutzerklärung</a>
       <a href="4s_impressum.html" id="mobile">i</a>
    </div>
      
  </div>



<!-- Swiper JS -->
    <script src="js/swiper.js"></script>
<!-- Lazysizes -->
    <script src="js/lazysizes.min.js" async=""></script>

<!-- Initialize Swiper -->
  <script>
      
      
      
    var swiper = new Swiper('.swiper-container', {
        
        // Disable preloading of all images
        preloadImages: false,
        
        // Enable lazy loading
        lazyload: true,
        loop: true,
        effect: 'fade',
//      speed: 0,
        
        keyboard: {
        enabled: true,
//        onlyInViewport: false,
        },
        
                     
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        },
        
        autoplay: {
        delay: 3000,
        //disableOnInteraction: true,
        loop: true, 
        },
        
        
        
    });
      
      
  </script>
4

0 回答 0