Не могу лениво загрузить фоновое изображение, используя Javascript LazySizes - PullRequest
Новая
       8

Не могу лениво загрузить фоновое изображение, используя Javascript LazySizes

0 голосов
/ 05 декабря 2018

Попытка получить lazysizes фоновых изображений для lazyload.

ссылка: https://github.com/aFarkas/lazysizes

Вот подробности:

Часть 1: МОЙ HTML 

<div class="imagebg">
    <div class="background-image-holder">
        <img alt="background" class="lazyload" src="/low-res.jpg" data-bg="/high-res.jpg" />
    </div>  
</div>

Часть 2: Javascript (в нижнем колонтитуле моего сайта) 

<script src="/js/lazysizes.4.1.4.min.js" async=""></script>

<script>
document.addEventListener('lazybeforeunveil', function(e){    
var bg = e.target.getAttribute('data-bg');    
if(bg){        
e.target.style.backgroundImage = 'url(' + bg + ')';
    }
});
lazySizes.init();
</script>

Проблема в том, что изображение в высоком разрешении не будет отображаться вообще.Я уверен, что это простое быстрое решение, но я попробовал все.

1 Ответ

0 голосов
/ 05 декабря 2018

Я думаю, что это работает, но вы не можете видеть изображение с высоким разрешением, поскольку оно находится (на заднем плане) изображения с низким разрешением.Используйте оба изображения в качестве фона или <img> источники, чтобы их можно было заменять и не накладывать друг на друга.

...