0

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

Krystian
  • 887
  • 5
  • 21
  • 52
  • You will also want to use customLoader instead of the default loader. As this is the background image of the page, so threshold doesn't make much sense. check out the example : http://jquery.eisbehr.de/lazy/example_use-custom-loaders – eenagy Aug 13 '17 at 01:48

2 Answers2

1

Remove the . from your path in data-src:

<div id="preise" class="lazybackground" data-src="/bilder/Hintergrund-rechner.png">
K Scandrett
  • 16,390
  • 4
  • 40
  • 65
  • 1
    The path in `data-src` is a CSS file path. Starting with a `/` means the path is relative to the root of your website. Refer https://css-tricks.com/quick-reminder-about-file-paths/ for more info – K Scandrett Aug 13 '17 at 02:13
  • Youre absolutely right! Will award you the 50 points tomorrow, as I still have to wait 21 hours to do so. Do you also have an idea how to fix the carousel slider to lazyload properly? – Krystian Aug 13 '17 at 04:14
  • No idea, sorry. But you'd get a better response if you edit that question and clarify what 'too slow' means, and what aspect of it is too slow - image rotation speed, initial time to show an image, loading time after scrolling it into view... etc. Remember that that slowness is a relative concept. I looked at your web-page and couldn't see what problem you were referring to – K Scandrett Aug 13 '17 at 05:06
0

You can try to use the new loading="lazy" image attribute

like this:

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

Here you could see browser support

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

Oded BD
  • 2,788
  • 27
  • 30