Lazy Loading wird nicht für reaktionsschnelle Bilder in Slick-Karussell funktionieren

Question

Ich habe Probleme mit Lazy Loading Bilder in slick carousel. Wenn ich Geräte mit einem Bildschirm unter 980px verwende, funktioniert alles so wie es sollte (kleinere Bilder bei Bedarf laden). Aber wenn ich auf Bildschirmen mit einer Auflösung von mehr als 980px bin, lädt es alle großen Bilder, als bei Bedarf laden kleine Bild eines nach dem anderen.

.cshtml Datei

@{ 
    Javascript.Includes.Add("views/home/home-ads-carousel.js"); 
    Javascript.Code.Add("views.home.carousel.init();"); 
} 

     <div class="ad_carousel"> 
      @foreach (var ad in homepageAds) 
      { 
       <div class="post__image-container"> 
        <picture> 
         <source media="(min-width: 980px)" srcset="@(Configuration.URLs.MediaPath + ad.ImagePath)" /> 
         <img class="post__featured-image" data-lazy="@(Configuration.URLs.MediaPath + ad.SmallImagePath)" /> 
        </picture> 
        <div class="carousel_text"> 
         <h2>@ad.Title</h2> 
         <p>@ad.CallToActionText</p> 
        </div> 
       </div> 
      }       
     </div> 

Js Datei

(function($) { 
    var carousel = {}; 
    carousel.init = function() { 
     this.carouselHolder = $('.ad_carousel'); 
     this.carouselHolder.slick({ 
      autoplay: true, 
      autoplaySpeed: 6000, 
      arrows: true, 
      infinite: true, 
      initialSlide: 1, 
      lazyLoad: 'ondemand', 
      //fade: true 
     }); 
    } 

    views.home.carousel = carousel; 

})(jQuery); 

Dank im Voraus.

Answer 1

Können Sie versuchen

<picture> 
    <img class="post__featured-image" data-lazy="@(Configuration.URLs.MediaPath + ad.SmallImagePath)" /> 
</picture> 

Statt

<picture> 
    <source media="(min-width: 980px)" srcset="@(Configuration.URLs.MediaPath + ad.ImagePath)" /> 
    <img class="post__featured-image" data-lazy="@(Configuration.URLs.MediaPath + ad.SmallImagePath)" /> 
</picture> 

Diese Arbeit sollte!