0

I have problem with lazy loading images in slick carousel. When I use devices that have screens below 980px, everything works as it should (load smaller images on demand). But when I am on screens with resolution greater than 980px it load all big images, than on demand load small image one at time.

.cshtml file

@{
    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 file 

(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);

thanks in advance.

Nikola Papic
  • 1
  • 1
  • 5

1 Answers1

0

Can you try

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

Instead of 

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

This should work!

Abhijeet K.
  • 537
  • 4
  • 7
  • It wont work for me. Because I have to load larger images for screens that have greater resolution than 980px. – Nikola Papic Jun 24 '16 at 12:04
  • In that case, you have two options. One, use a different lazy loader bLazy[http://dinbror.dk/blog/blazy/] to lazy load the images in different breakpoints. Option two, You need to customize the slick plugin JS – Abhijeet K. Jun 24 '16 at 12:11