jquerylazy-loadingjquery-lazyload

lazyload background image AND normal images with jquery library

I am lazyloading the images on https://bm-translations.de So far so good, but now I tried to implement it for the background image as well, but its nod loading the image (thatswhy currently not activated for those background images).

I tried to do it like here without success: http://jquery.eisbehr.de/lazy/example_load-background-images

Thats my HTML:

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

Thats my Javascript:

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

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

What am I doing wrong? Thanky for your help guys! :-)

PS: I am also struggling to make the sliders to load their images lazy (now its too lazy) My question to it: Lazyloading images in horizontal slider

Solution

  • Remove the . from your path in data-src:

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