Fullpage.js: Lazy loading fp-auto-height does not load all images in viewport

Created on 16 May 2019 · 3Comments · Source: alvarotrigo/fullPage.js

Description

When dealing with sections smaller than viewport, like with class fp-auto-height, lazy loading media doesn't work as expected. Sections which are fully visible, although not 'active' won't lazyload their images.

Link to isolated reproduction with no external CSS / JS

https://codepen.io/xdizzy12/pen/QRpxPX
Just scroll up and down and watch lazy-loaded images pop in unexpectedly, even though they should have been visible.

Steps to reproduce it

Create one or more fp-auto-height sections. In my personal case just doing this with a footer section does it.
The sections above/below this auto height section should have lazy-loaded media.
On page load, go to the auto height section. Either by setting class 'active' or using an anchor link.
Now FP will switch to this section onload, but since it doesn't cover the entire viewport (auto height) other sections will be visible, but their content is not lazyloaded.

Versions

Tested in latest (or very recent) versions of Chrome, Firefox, Safari, Internet Explorer 11, Edge - and if available their mobile counterparts on both Android and Apple devices. It's present on all devices.

Workaround for anchors

By setting the data-anchor="" to empty, it won't be possible to skip to this specific slide onload, thus preventing this issue. Although that limits usability.

Method suggestion

I see there is no method to manually lazyload all content in a certain slide/section. If a method could be created to forceLazyLoad(section/slide) that would allow us to make easy workarounds for this, or for example; start buffering one slide/section ahead for heavy content like videos.
EDIT: Went through the source code: The lazyLoad() and related methods exist, almost ready to go, but aren't available in the API. Could just make them available there and it should work.

bug fixed on dev

Source