javascript - 延迟加载不适用于光滑轮播中的响应式图像

Question

我在延迟加载图像时遇到问题slick carousel。当我使用屏幕低于 980 像素的设备时，一切正常（按需加载较小的图像）。但是，当我在分辨率大于 980 像素的屏幕上时，它会加载所有大图像，而不是按需加载一个小图像。

.cshtml 文件

@{
    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 文件

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

提前致谢。

Answer 1

你能试一下吗

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

代替

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

这应该工作！