- Enhancement: new option lazyLoadThreshold to preload adjacent sec…

…tions/slides #4576 #3714 #1973

README.md

@@ -257,6 +257,7 @@ var myFullpage = new fullpage('#fullpage', {
 	slideSelector: '.slide',
 
 	lazyLoading: true,
+	lazyLoadThreshold: 0,
 	observer: true,
 	credits: { enabled: true, label: 'Made with fullPage.js', position: 'right'},
 
@@ -507,7 +508,7 @@ It requires the file `vendors/easings.min.js` or [jQuery UI](https://jqueryui.co
 
 ### continuousVertical
 
-(default `false`) Defines whether scrolling down in the last section should scroll down to the first one and if scrolling up in the first section should scroll up to the last one. Not compatible with `loopTop`, `loopBottom` or any scroll bar present in the site (`scrollBar:true` or `autoScrolling:false`).
+(default `false`) Defines whether scrolling down in the last section should scroll down to the first one and if scrolling1 up in the first section should scroll up to the last one. Not compatible with `loopTop`, `loopBottom` or any scroll bar present in the site (`scrollBar:true` or `autoScrolling:false`).
 
 ### continuousHorizontal
 
@@ -677,6 +678,9 @@ Allows you to configure the parameters for the cards effect when using the optio
 
 (default `true`) Lazy loading is active by default which means it will lazy load any media element containing the attribute `data-src` as detailed in the [Lazy Loading docs](https://github.com/alvarotrigo/fullPage.js#lazy-loading) . If you want to use any other lazy loading library you can disable this fullpage.js feature.
 
+### lazyLoadThreshold
+(default `0`) Defines how many adjacent vertical sections and horizontal slides should be preloaded relative to the current one. Use a number to specify how many previous and next sections or slides should be preloaded.
+
 ### observer
 
 (default `true`) Defines whether or not to observe changes in the HTML structure of the page. When enabled, fullPage.js will automatically react to those changes and update itself accordingly. Ideal when adding, removing or hidding sections or slides.

rollup.config.js

@@ -111,6 +111,7 @@ const terserOptions = {
                 'onScrollOverflow',
 
                 'lazyLoading',
+                'lazyLoadThreshold',
                 'observer',
 
                 // Public API

src/js/dom/afterRenderActions.js

@@ -2,9 +2,9 @@ import * as utils from '../common/utils.js';
 import { FP } from '../common/constants.js';
 import { getState, state } from '../common/state.js';
 import { getOptions} from '../common/options.js';
-import {  playMedia } from '../media.js';
+import { playMedia } from '../media.js';
 import { fireCallback } from '../callbacks/fireCallback.js';
-import { lazyLoad } from '../lazyLoad/lazyLoad.js';
+import { lazyLoadPanels } from '../lazyLoad/lazyLoad.js';
 import { lazyLoadOthers } from '../lazyLoad/lazyLoadOthers.js';
 import { 
     COMPLETELY,
@@ -26,7 +26,7 @@ export function afterRenderActions(){
 
     utils.addClass(sectionElem, COMPLETELY);
 
-    lazyLoad(sectionElem);
+    lazyLoadPanels(getState().activeSection);
     lazyLoadOthers();
     playMedia(sectionElem);
 

src/js/lazyLoad/lazyLoad.js

@@ -33,4 +33,23 @@ export function lazyLoad(destiny){
             }
         }
     });
+}
+
+export function lazyLoadPanels(panel){
+    var lazyLoadThresold = getOptions().lazyLoadThreshold;
+
+    lazyLoad(panel.item);
+    if(lazyLoadThresold){
+        lazyLoadDirection(panel, 'prev', lazyLoadThresold);
+        lazyLoadDirection(panel, 'next', lazyLoadThresold);
+    }
+}
+
+// Lazy load "count" number of panels in a specific direction
+function lazyLoadDirection(startPanel, direction, count) {
+    let currentPanel = startPanel;
+    for (let i = 0; i < count && (currentPanel = currentPanel[direction]()); i++) {
+        console.log(currentPanel.item);
+        lazyLoad(currentPanel.item);
+    }
 }

src/js/lazyLoad/lazyLoadOthers.js

@@ -8,7 +8,8 @@ import {
 } from '../common/selectors.js';
 import { state } from '../common/state.js';
 import { isResponsiveMode } from '../responsive.js';
-import { lazyLoad } from './lazyLoad.js';
+import { lazyLoadPanels } from './lazyLoad.js';
+import { getPanelByElement } from '../common/item.js';
 
 /**
 * Makes sure lazyload is done for other sections in the viewport that are not the
@@ -25,7 +26,7 @@ export function lazyLoadOthers(){
     //making sure to lazy load auto-height sections that are in the viewport
     utils.$(SECTION_SEL + ':not(' + ACTIVE_SEL + ')').forEach(function(section){
         if(isSectionInViewport(section)){
-            lazyLoad(section);
+            lazyLoadPanels(getPanelByElement(section));
         }
     });
 }

src/js/optionsDefault.js

@@ -98,6 +98,7 @@ export const defaultOptions = {
     onScrollOverflow: null,
 
     lazyLoading: true,
+    lazyLoadThreshold: 0,
     observer: true,
     scrollBeyondFullpage: true
 };

src/js/scroll/scrollHandler.js

@@ -3,7 +3,7 @@ import { getOptions } from '../common/options.js';
 import { stopMedia, playMedia} from '../media.js';
 import { updateState } from '../stateUpdates.js';
 import { getState, setState, state } from '../common/state.js';
-import { lazyLoad } from '../lazyLoad/lazyLoad.js';
+import { lazyLoadPanels } from '../lazyLoad/lazyLoad.js';
 import { setPageStatus } from '../anchors/setPageStatus.js';
 import { activateMenuAndNav } from '../menu/activateMenuAndNav.js';
 import { $body } from '../common/cache.js';
@@ -128,7 +128,7 @@ export function scrollHandler(e){
                 }
 
                 stopMedia(leavingSection);
-                lazyLoad(currentSectionElem);
+                lazyLoadPanels(currentSection);
                 playMedia(currentSectionElem);
 
                 activateMenuAndNav(anchorLink, sectionIndex - 1);

src/js/scroll/scrollPage.js

@@ -10,7 +10,7 @@ import { createInfiniteSections } from '../infiniteScroll/createInfiniteSections
 import { continuousVerticalFixSectionOrder } from '../infiniteScroll/fixPosition.js';
 import { stopMedia, playMedia} from '../media.js';
 import { updateState } from '../stateUpdates.js';
-import { lazyLoad } from '../lazyLoad/lazyLoad.js';
+import { lazyLoadPanels } from '../lazyLoad/lazyLoad.js';
 import { lazyLoadOthers } from '../lazyLoad/lazyLoadOthers.js';
 import { scrollOverflowHandler } from '../scrolloverflow.js';
 import { setPageStatus } from '../anchors/setPageStatus.js';
@@ -122,7 +122,7 @@ export function scrollPage(section, callback, isMovementUp){
     utils.addClass(element, ACTIVE);
     utils.removeClass(utils.siblings(element), ACTIVE);
     updateState();
-    lazyLoad(element);
+    lazyLoadPanels(section);
 
     //preventing from activating the MouseWheelHandler event
     //more than once if the page is scrolling

src/js/slides/landscapeScroll.js

@@ -13,7 +13,7 @@ import {
 import { fireCallback } from '../callbacks/fireCallback.js';
 import { updateState } from '../stateUpdates.js';
 import { playMedia, stopMedia } from '../media.js';
-import { lazyLoad } from '../lazyLoad/lazyLoad.js';
+import { lazyLoadPanels } from '../lazyLoad/lazyLoad.js';
 import { setPageStatus } from '../anchors/setPageStatus.js';
 import { activeSlidesNavigation } from '../nav/slides.js';
 import { toggleControlArrows } from '../arrows.js';
@@ -99,7 +99,7 @@ export function landscapeScroll(slides, destiny, direction){
 
     if(!v.localIsResizing){
         stopMedia(v.prevSlide);
-        lazyLoad(destiny);
+        lazyLoadPanels(slide);
     }
 
     toggleControlArrows(v);