使用 jquery 库延迟加载背景图像和普通图像

Question

我正在延迟加载 https://bm-translations.de 上的图像到目前为止一切顺利，但现在我也尝试为背景图像实现它，但它点头加载图像（这就是为什么目前没有为那些背景图像激活）。

我试过像这里那样做，但没有成功： http://jquery.eisbehr.de/lazy/example_load-background-images

那是我的 HTML:

<div id="preise" class="lazybackground" data-src="./bilder/Hintergrund-rechner.png">
... text, text, text
</div>

那是我的 Javascript:

//Lazyload Images with Threshold https://www.appelsiini.net/projects/lazyload
$(function() {
    $("img.lazy").lazyload({
        threshold : 400
    });
}); 

$(function() {
    $('.lazybackground').lazy();
});

我做错了什么？谢谢你们的帮助！ :-)

PS：我也在努力让滑块懒惰地加载它们的图像（现在太懒了）我的问题是：Lazyloading images in horizontal slider

Answer 1

从 data-src 中的路径中删除 .:

<div id="preise" class="lazybackground" data-src="/bilder/Hintergrund-rechner.png">

Answer 2

你可以尝试使用新的loading="lazy"图片属性

像这样：

<img src="https://i.picsum.photos/id/238/300/300.jpg" loading="lazy" />

在这里你可以看到浏览器支持

https://caniuse.com/#feat=loading-lazy-attr

使用 jquery 库延迟加载背景图像和普通图像

lazyload background image AND normal images with jquery library

jquery

lazy-loading

jquery-lazyload