无法使用Javascript LazySizes延迟加载背景图像

Question

试图将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>

问题是高分辨率图像根本不会显示。我敢肯定这是一个简单的快速修复方法，但是我已经尝试了所有方法。

Answer 1

我认为它可以工作，但是您看不到高分辨率图像，因为它位于低分辨率图像的后面（在背景中）。要么将这两个图像用作背景，要么将CTRL+SHIFT+ENTER用作源，以便可以将它们替换并且不能相互堆叠。