Lazysizes bgset не меняет изображение при изменении размера - PullRequest
Новая
       69

Lazysizes bgset не меняет изображение при изменении размера

0 голосов
/ 10 июля 2019

Я использую Lazysizes в магазине Shopify, но я заметил, что фоновые изображения не меняются до меньших размеров, когда размер экрана достигает предустановки в data-bgset.Я следовал всей документации, но не вижу никаких изменений на изображении, когда размер экрана ниже одной из установленных значений ширины в data-bgset.Вот код для изображения: 

<div class ="collection-grid-item__overlay box ratio-container lazyload"
    data-bgset ="//cdn.shopify.com/s/files/1/2513/1014/collections/toallas_1_180x.png?v=1557940674 180w,
    //cdn.shopify.com/s/files/1/2513/1014/collections/toallas_1_360x.png?v=1557940674 360w,
    //cdn.shopify.com/s/files/1/2513/1014/collections/toallas_1_400x.png?v=1557940674 450w,
    //cdn.shopify.com/s/files/1/2513/1014/collections/toallas_1.png?v=1557940674 500w"
    data-sizes ="auto"
    data-parent-fit ="cover"
    >
</div>
<noscript>
<div class="collection-grid-item__overlay" style="background-image: url('{{ collection_image | img_url: '1024x1024' }}')"></div>
</noscript>

Я правильно настроил LazySizes js и плагин для bg и respimg js, как в документации.Сайт, о котором идет речь, - https://tiendadepend.mx, а изображения находятся в разделе под заголовком «¿FUGAS DE ORINA? CONOCE NUESTROS PRODUCTOS».Эти изображения не меняются при загрузке.Любые идеи, что я мог бы попытаться это исправить?

1 Ответ

0 голосов
/ 11 июля 2019

Lazysizes не распознает data-bgset, поэтому ваш код не работает. Вам нужно переименовать его в «data-bg» и добавить следующий список событий - 

//add simple support for background images:
document.addEventListener('lazybeforeunveil', function(e){
    var bg = e.target.getAttribute('data-bg');
    if(bg){
        e.target.style.backgroundImage = 'url(' + bg + ')';
    }
});

Это не будет загружать изображения в соответствии с размером экрана, но будет лениво загружать фон вашего Div. Вы можете найти больше информации здесь - Ссылка

Однако, если вы хотите загружать изображения по ширине, вам нужно будет использовать <img> внутри div следующим образом 

<div class="ratio-container">
    <img

        data-sizes="auto"
        data-srcset="http://placehold.it/175x75 175w,
        http://placehold.it/350x150 350w,
        http://placehold.it/700x300 700w,
        http://placehold.it/1400x600 1400w"
        data-src="http://placehold.it/700x300"
        class="lazyload" />
</div>

Ссылка на документ - Ссылка

...