Merge pull request #4650 from alvarotrigo/dev

Merging dev branch 4.0.28

Author: alvarotrigo

README.md

@@ -19,7 +19,7 @@
 
 ---
 
-![fullPage.js version](https://img.shields.io/badge/fullPage.js-v4.0.27-brightgreen.svg)
+![fullPage.js version](https://img.shields.io/badge/fullPage.js-v4.0.28-brightgreen.svg)
 [![License](https://img.shields.io/badge/License-GPL-blue.svg)](https://www.gnu.org/licenses/gpl-3.0.html)
 [![PayPal Donate](https://img.shields.io/badge/donate-PayPal.me-ff69b4.svg)](https://www.paypal.me/alvarotrigo/9.95)
 [![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/fullpage.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/fullpage.js)
@@ -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`) Specifies the number of adjacent vertical sections and horizontal slides whose media elements should be lazy-loaded 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.

dist/fullpage.css

@@ -1,5 +1,5 @@
 /*!
- * fullPage 4.0.27
+ * fullPage 4.0.28
  * https://github.com/alvarotrigo/fullPage.js
  *
  * @license GPLv3 for open source use only

dist/fullpage.extensions.min.js

@@ -1,5 +1,5 @@
 /*!
-* fullPage 4.0.27
+* fullPage 4.0.28
 * https://github.com/alvarotrigo/fullPage.js
 *
 * @license GPLv3 for open source use only
@@ -1206,6 +1206,7 @@
       afterResponsive: null,
       onScrollOverflow: null,
       lazyLoading: true,
+      lazyLoadThreshold: 0,
       observer: true,
       scrollBeyondFullpage: true
     };
@@ -1834,6 +1835,24 @@
         }
       });
     }
+    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) {
+      var currentPanel = startPanel;
+
+      for (var i = 0; i < count && (currentPanel = currentPanel[direction]()); i++) {
+        console.log(currentPanel.item);
+        lazyLoad(currentPanel.item);
+      }
+    }
 
     /**
     * Sets a class for the body of the page depending on the active section / slide
@@ -2257,7 +2276,7 @@
 
       $(SECTION_SEL + ':not(' + ACTIVE_SEL + ')').forEach(function (section) {
         if (isSectionInViewport(section)) {
-          lazyLoad(section);
+          lazyLoadPanels(getPanelByElement(section));
         }
       });
     }
@@ -2519,7 +2538,7 @@
       addClass(element, ACTIVE);
       removeClass(siblings(element), ACTIVE);
       updateState();
-      lazyLoad(element); //preventing from activating the MouseWheelHandler event
+      lazyLoadPanels(section); //preventing from activating the MouseWheelHandler event
       //more than once if the page is scrolling
 
       setState({
@@ -3174,7 +3193,7 @@
 
       if (!v.localIsResizing) {
         stopMedia(v.prevSlide);
-        lazyLoad(destiny);
+        lazyLoadPanels(slide);
       }
 
       toggleControlArrows(v); //only changing the URL if the slides are in the current section (not for resize re-adjusting)
@@ -5308,7 +5327,7 @@
             }
 
             stopMedia(leavingSection);
-            lazyLoad(currentSectionElem);
+            lazyLoadPanels(currentSection);
             playMedia(currentSectionElem);
             activateMenuAndNav(anchorLink, sectionIndex - 1);
 
@@ -5508,7 +5527,7 @@
         });
       });
       var t = ["-"];
-      var n = "\x32\x30\x32\x34\x2d\x37\x2d\x31\x39".split("-"),
+      var n = "\x32\x30\x32\x34\x2d\x37\x2d\x32\x32".split("-"),
           e = new Date(n[0], n[1], n[2]),
           r = ["se", "licen", "-", "v3", "l", "gp"];
 
@@ -5661,7 +5680,7 @@
       var section = getState().activeSection;
       var sectionElem = getState().activeSection.item;
       addClass(sectionElem, COMPLETELY);
-      lazyLoad(sectionElem);
+      lazyLoadPanels(getState().activeSection);
       lazyLoadOthers();
       playMedia(sectionElem);
 
@@ -5969,7 +5988,7 @@
       }; //public functions
 
 
-      FP.version = '4.0.27';
+      FP.version = '4.0.28';
       FP.test = Object.assign(FP.test, {
         top: '0px',
         translate3d: 'translate3d(0px, 0px, 0px)',

dist/fullpage.js

@@ -0,0 +1,7 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#193318",
+        "titleBar.activeBackground": "#244822",
+        "titleBar.activeForeground": "#F6FBF6"
+    }
+}

dist/fullpage.min.css

@@ -5,11 +5,10 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Lazy load - fullPage.js</title>
     <meta name="author" content="Alvaro Trigo Lopez" />
-    <meta name="description" content="fullPage full-screen normal scrolling with autoScrolling." />
+    <meta name="description" content="fullPage Lazy Load Demo." />
     <meta name="keywords"  content="fullpage,jquery,demo,screen,fullscreen,lazyload,lazy,passive,load,src,data-src,media" />
     <meta name="Resource-type" content="Document" />
 
-
     <link rel="stylesheet" type="text/css" href="../dist/fullpage.css" />
     <link rel="stylesheet" type="text/css" href="examples.css" />
     <style>
@@ -126,10 +125,22 @@ <h1>Lazy load</h1>
             <p>Just use `data-src` or `data-srcset` for media elements.</p>
         </div>
     </div>
-    <div class="section" id="section1">
+    <div class="section "id="section1">
+        <div class="intro">
+            <img data-srcset="imgs/2.png, imgs/2.png"  alt="1"/>
+            <h1>Section 2</h1>
+        </div>
+    </div>
+    <div class="section active" id="section2">
+        <div class="intro">
+            <img data-srcset="imgs/3.png, imgs/2.png"  alt="1"/>
+            <h1>Section 3</h1>
+        </div>
+    </div>
+    <div class="section" id="section4">
         <div class="slide" id="slide1">
             <div class="intro">
-                <h1>Lazy load image</h1>
+                <h1>Section 4</h1>
                 <img data-src="imgs/iphone-blue.png" alt="iphone" id="iphone-two" />
             </div>
         </div>
@@ -145,7 +156,7 @@ <h1>Lazy load video</h1>
         </div>
 
     </div>
-    <div class="section" id="section2">
+    <div class="section" id="section5">
         <div class="intro">
             <h1>Lazy load background </h1>
             <p>Make use of the `onLeave` callback. See the source code here!</p>
@@ -158,14 +169,23 @@ <h1>Lazy load background </h1>
 
 <script type="text/javascript">
     var myFullpage = new fullpage('#fullpage', {
-        menu: '#menu',
-        anchors: ['firstPage', 'secondPage', '3rdPage'],
-        sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
+
+        // Lazyload default values
+        lazyLoading: true,
+        lazyLoadThreshold: 3,
+
+        // To lazy load a background
         onLeave: function(origin, destination, direction){
           if(destination.index === 2){
              destination.item.classList.add('load-background');
           }
-        }
+        },
+
+        // Optional
+        menu: '#menu',
+        anchors: ['firstPage', 'secondPage', '3rdPage', '4page', '5page', '6page', '7page'],
+        sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C','#C63D0F', '#1BBC9B', '#7E8F7C','#C63D0F', '#1BBC9B', '#7E8F7C'],
+        navigation: true       
     });
 </script>
 

dist/fullpage.min.css.map

@@ -41,12 +41,13 @@ gulp.task('update-version', function(done){
     // updating readme version
     gulp.src([
         './README.md',
+        './lang/brazilian-portuguese/README.md',
         './lang/chinese/README.md',
         './lang/french/README.md',
+        './lang/japanese/README.md',
         './lang/korean/README.md',
         './lang/russian/README.md',
-        './lang/spanish/README.md',
-        './lang/brazilian-portuguese/README.md',
+        './lang/spanish/README.md'
     ], { base: "./" })
         .pipe(replace(/(fullPage.js-v)([\d\.]+)/g, "$1" + fpPackage.version))
         .pipe(gulp.dest('.'));