If you wonder why your current lazyload library doesn't work on fullPage.js we have you covered here.

The reason why it doesn't work is because fullPage.js won't trigger the scroll event as it doesn't actually "scroll" the page in the conventional way. 

Instead, fullPage.js simulates the scroll by using CSS transitions or javascript.

Easy way

The easiest way to get your current lazyload technique to work together with fullpage.js is by using the fullPage.js option scrollBar:true. This way fullPage.js will show a scrollbar as other pages do and your libraries will work as expected. 

Using the fullPage.js lazy load option

fullPage.js provides a lazy load option by default so you do not have to add any extra scripts to your page. In fact, it will work even better in some scenarios such as lazy loading horizontal slides too or having full compatibility with its extensions.

If you want to this route, all you have to do is enabling the lazy load option lazyLoading (if it was off. It is active by default) and using the attribute data-srcfor the source of your images file instead of the conventional src. Here's an example:

<div class="section">
    <img data-src="image.png">

    <video>
	<source data-src="video.webm" type="video/webm" />
	<source data-src="video.mp4" type="video/mp4" />
    </video>
</div>

In this scenario, the image and the video in this section will only load once we reach this section. 

It will actually start loading them whenever you leave the previous section for a faster load.

Lazy loading backgrounds

When you use CSS backgrounds then we have to actually modify our CSS to get them to lazy load.

First of all, we will make sure to add a class, for example lazy-loaded every time we arrive at a new section. This way all sections we visit will now contain this class. The ones we didn't visit won't have it.

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction) {
        destination.item.classList.add('lazy-loaded');
    }
});

All we have to do now is create or "conditional CSS" so we only show an image when the class is actually added to our section:

.section1{
   background-size: cover;
}

.section1.loadImage{
    background: url(image.jpg);
}

Of course, you won't have to add this "condition" to the backgrounds that are visible on page load.

Here's a CodePen example with lazy load backgrounds that we've created for you.

You might also find these articles relevant: