lazy load images in fullpage.js

[Daniel-Oswald]

hey guys,
i am building a site with 4 sections that show a grid of images (around 20-30 images per section). I am afraid now the site is getting too heavy. Is there a way to load images after a section or slide has been entered? like lazy load for example?

cheers

[alvarotrigo]

Read this answer.

It is a combination of callbacks and CSS.

[alvarotrigo]

A new functionality for it has been added in fullPage.js 2.6.6.
Read more about it here.

[NoBodyButMe]

Is it possible to "lazy load" background-images too?

[alvarotrigo]

@KrisMerckx read two answers over yours...

[flatcapco]

@alvarotrigo what implication does this have to print? as I guess the data-src won't be updated until the image is viewed so print will miss these images?

[alvarotrigo]

@latwelve good point. I guess you would have to manually enable them with JavaScript or jquery if that's even possible...
Maybe the plugin could provide some forceLoad function or similar, but... for now I'm not even sure if it is possible to have a cross browser solution to detect a print...

I believe this is a problem all lazy load plugins experience as well and it's not something particular from fullPage.js

[flatcapco]

Yeah I couldn't work that out either... for this project I just mapped it to a button and set the jquery to swap the data-src for src... not ideal still as even though the GET requests for the images start pulling the print page will be up too soon.. so ideally the user would need to wait 10 seconds for them to fully load.

I think a function to trigger a preload of the other images is possible the way to go for me.

[davidhellmann]

Hey, cool works fine but is there an option to set an offset for loading the image a bit earlier? :)

[alvarotrigo]

is there an option to set an offset for loading the image a bit earlier? :)

Not yet. Maybe for the next release.
If you need it now contact me for an urgent request.

[davidhellmann]

@alvarotrigo ok sounds good. no thanks, it would be nice but it's not an urgent request :) Thanks!

[robinscholz]

Is there a way to either turn off lazy loading or trigger the load before the image enters the viewport?

[alvarotrigo]

@rbnschlz read this topic and use the onLeave event.

[Pixelsmith]

Is it possible to disable the lazy load autoinit and call it manually? I'd like to use LL for my second slide, but not the first. I can do the 'onLeave' event, but that seems like a lot more work since LL is now baked in.

[alvarotrigo]

@Pixelsmith Just don't use data-src if you dont want lazy loading. Use src.

[Pixelsmith]

Not the answer I was looking for, but it did trigger the answer I needed.

The conflict I was having was that Lazy Load XT natively calls data-src, identical to FPJS. LLXT allows me to customize the SRC attribute with srcAttr, so I changed that and now everybody's playing nicely together.

Thanks,
A.