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

【问题标题】：lazyload background image AND normal images with jquery library使用 jquery 库延迟加载背景图像和普通图像
【发布时间】：2019-12-30 05:08:38
【问题描述】：

我正在延迟加载 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

【问题讨论】：

您还需要使用 customLoader 而不是默认加载器。由于这是页面的背景图片，所以阈值没有多大意义。查看示例：jquery.eisbehr.de/lazy/example_use-custom-loaders

标签： jquery lazy-loading jquery-lazyload

【解决方案1】：

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

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

【讨论】：

data-src中的路径是CSS文件路径。以/ 开头意味着路径是相对于您网站的根目录的。更多信息请参考css-tricks.com/quick-reminder-about-file-paths
你说得对！明天会奖励你 50 分，因为我还要等 21 小时才能这样做。您是否也知道如何修复轮播滑块以正确延迟加载？
不知道，抱歉。但是，如果您编辑该问题并澄清“太慢”的含义，以及它的哪个方面太慢 - 图像旋转速度，显示图像的初始时间，滚动到视图后的加载时间，您会得到更好的响应。 .. 等等。请记住，缓慢是一个相对概念。我查看了您的网页，看不出您指的是什么问题

【解决方案2】：

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

像这样：

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

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

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

【讨论】：