Merge pull request #4650 from alvarotrigo/dev

Merging dev branch 4.0.28

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.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)',

examples/.vscode/settings.json

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

examples/lazy-load.html

@@ -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>
 

gulp/build.js

@@ -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('.'));

lang/brazilian-portuguese/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'},
 
@@ -614,6 +615,9 @@ Allows you to configure the parameters for the cards effect when using the optio
 ### lazyLoading
 (padrão `true`) O carregamento lento está ativo por padrão, o que significa que carregará lentamente qualquer elemento de mídia contendo o atributo `data-src` conforme detalhado nos [documentos de carregamento lento](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/brazilian-portuguese/#lazy-loading). Se você quiser usar qualquer outra biblioteca de carregamento lento, você pode desativar esse recurso fullpage.js.
 
+### lazyLoadThreshold
+(padrão `0`) Especifica o número de seções verticais adjacentes e slides horizontais cujos elementos de mídia devem ser carregados de forma preguiçosa em relação ao atual. Use um número para especificar quantas seções ou slides anteriores e seguintes devem ser pré-carregados
+
 ### observer
 (padrão `true`) Define se deve ou não observar mudanças na estrutura HTML da página. Quando ativado, fullPage.js reagirá automaticamente a essas alterações e se atualizará de acordo. Ideal ao adicionar, remover ou ocultar seções ou slides.
 

lang/chinese/README.md

@@ -18,7 +18,7 @@
 
 ---
 
-![fullPage.js version](https://img.shields.io/badge/fullPage.js-v4.0.27,2-brightgreen.svg)
+![fullPage.js version](https://img.shields.io/badge/fullPage.js-v4.0.28,2-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)
@@ -253,6 +253,7 @@ var myFullpage = new fullpage('#fullpage', {
 	slideSelector: '.slide',
 
 	lazyLoading: true,
+	lazyLoadThreshold: 0,
 	observer: true,
 	credits: { enabled: true, label: 'Made with fullPage.js', position: 'right'},
 
@@ -610,6 +611,9 @@ Allows to configure the parameters for the water effect when using the option `w
 ### lazyLoading
 （默认`true`）懒加载默认是激活的，这意味着它会延迟加载包含属性 `data-src` 的任何媒体元素，详见 [Lazy Loading docs](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD) 。 如果你想使用任何其他的后加载库，你可以禁用这个 fullpage.js 功能。
 
+### lazyLoadThreshold
+（默认值为 `0`）指定相对于当前部分，应该延迟加载的相邻垂直部分和水平幻灯片的媒体元素数量。使用一个数字来指定应该预加载多少前一个和下一个部分或幻灯片。
+
 ### observer
 （默认： `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. (translation needed)
 

lang/french/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)
@@ -260,6 +260,7 @@ var myFullpage = new fullpage('#fullpage', {
 	slideSelector: '.slide',
 
 	lazyLoading: true,
+	lazyLoadThreshold: 0,
 	observer: true,
 	credits: { enabled: true, label: 'Made with fullPage.js', position: 'right'},
 
@@ -620,6 +621,9 @@ Vous permet de configurer les paramètres pour l'effet des cartes quand vous uti
 ### lazyLoading
 (défaut `true`) Le chargement paresseux est actif par défaut ce qui signifie qu'il chargera paresseusement tout élément média contenant l'attribut `data-src` comme détaillé dans la [Lazy Loading docs](https://github.com/alvarotrigo/fullPage.js/tree/dev/lang/french/#lazy-loading) . Si vous voulez utiliser une autre bibliothèque de chargement paresseux, vous pouvez désactiver cette fonctionnalité de fullpage.js.
 
+### lazyLoadThreshold
+(par défaut `0`) Spécifie le nombre de sections verticales adjacentes et de diapositives horizontales dont les éléments multimédias doivent être chargés de manière différée par rapport à la section actuelle. Utilisez un nombre pour spécifier combien de sections ou diapositives précédentes et suivantes doivent être préchargées.
+
 ### 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. (translation needed)
 

lang/japanese/README.md

@@ -19,7 +19,7 @@
 
 ---
 
-![fullPage.js version](https://img.shields.io/badge/fullPage.js-v4.0.26-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)
@@ -261,6 +261,7 @@ var myFullpage = new fullpage('#fullpage', {
 	slideSelector: '.slide',
 
 	lazyLoading: true,
+	lazyLoadThreshold: 0,
 	observer: true,
 	credits: { enabled: true, label: 'Made with fullPage.js', position: 'right' },
 
@@ -769,6 +770,9 @@ fullpage.js >= 3.0.1が必要です。
 詳細は遅延読み込みドキュメントをご覧ください。 [遅延読み込み](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/japanese/#遅延読み込み)  
 他の遅延読み込みライブラリを使用したい場合は、このfullpage.js機能を無効にすることができます。
 
+### lazyLoadThreshold
+（デフォルト `0`）現在のセクションに対して、隣接する垂直セクションと水平スライドのメディア要素を遅延読み込みする数を指定します。前後のセクションやスライドを何個プリロードするかを数値で指定してください。
+
 ### cardsOptions
 
 (デフォルト: `{ perspective: 100, fadeContent: true, fadeBackground: true}`) オプション`cards: true`を使用する場合、カード効果のパラメーターを設定できます。[カードオプションの適用方法について詳しく読む](https://github.com/alvarotrigo/fullPage.js/wiki/Extension-Cards)

lang/korean/README.md

@@ -18,7 +18,7 @@
 </p>
 ---
 
-![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](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)
@@ -247,6 +247,7 @@ new fullpage('#fullpage', {
 	slideSelector: '.slide',
 
 	lazyLoading: true,
+	lazyLoadThreshold: 0,
 	observer: true,
 	credits: { enabled: true, label: 'Made with fullPage.js', position: 'right'},
 
@@ -460,7 +461,7 @@ new fullpage('#fullpage', {
 ### touchSensitivity
 (기본값 `5`) 브라우저 창 너비/폭 퍼센트와 다음 구역 / 슬라이드로 이동하는 데 필요한 스와이프 거리를 정의합니다.
 
-## skipIntermediateItems
+### skipIntermediateItems
 (기본값 `false`). 연속되지 않은 수직 섹션 또는 수평 슬라이드 간에 탐색할 때 스크롤 애니메이션을 건너뛸지 여부를 결정합니다. 가능한 값은 `true`, `false`, `sections`, `slides`이며, 이 동작을 수직, 수평, 또는 두 방향 모두에 적용할 수 있습니다.
 
 
@@ -597,6 +598,9 @@ parallax:true 옵션을 쓰실 때 패럴랙스 배경 효과 매개변수를 
 ### lazyLoading
 (기본값 `true`) 기본 설정으로 지연 로딩이 활성화됩니다. [지연 로딩 문서](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#%EC%A7%80%EC%97%B0-%EB%A1%9C%EB%94%A9)에 자세히 설명된 대로 `data-src` 속성을 지닌 모든 미디어 요소를 지연 로딩합니다. 이외 다른 지연 로딩 라이브러리를 쓰고 싶으시다면 이 fullpage.js 기능을 비활성화하실 수 있습니다.
 
+### lazyLoadThreshold
+(기본값 `0`) 현재 섹션을 기준으로 인접한 수직 섹션 및 수평 슬라이드의 미디어 요소가 지연 로드되어야 하는 수를 지정합니다. 이전 및 다음 섹션이나 슬라이드를 몇 개 미리 로드할지 숫자로 지정하세요.
+
 ### observer
 (기본값 `true`) 페이지의 HTML 구조 변경을 감지할지 여부를 정의합니다. 활성화되면 fullPage.js는 해당 변경 사항에 자동으로 반응하여 자체를 업데이트합니다. 구역 또는 슬라이드를 추가, 제거하거나 숨길 때 이상적입니다.