Question

我使用lazysizes库来延迟加载图像。跨度保存实际图像src，并在页面源中保留img标记以获得更好的SEO。

img运行良好，src="/resources/FolderIMAGES/795_t.JPG"在用户可见时正确添加，但为放置在span元素上的背景图片添加事件监听器会触发所有图像的加载如果用户看不到那些......

lazysizes存储库问题中心的一些人在评论中说，lazybeforeunveil事件的正常行为即使在图像不可见时也会触发。

所以我的问题是，在图像可见时检测到的正确事件是什么？如何传递data-bg属性值以填充backgroundImage样式属性？鉴于文档说应该使用lazybeforeunveil来处理背景图像lazyload。

我不知道它是否会影响任何内容，但img已display: none并更改为height: 0px !important;width: 0px !important;，以便lazysizes可以检测到图像。

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

<img itemprop="image" class=" lazyloaded" data-src="/resources/FolderIMAGES/795_t.JPG" title="Anel Magnético G2 - Wizard Pk Ring" alt="Anel Magnético G2 - Wizard Pk Ring" >

<span class="image lazyloaded" data-bg="/resources/FolderIMAGES/795_t.JPG  " alt="Anel Magnético G2 - Wizard Pk Ring" title="Anel Magnético G2 - Wizard Pk Ring"></span>

Lazysizes在延迟加载背景图像时失败

0 个答案: