add different throttle options

aFarkas · Mar 11, 2018 · 7d74351 · 7d74351
1 parent 150c3e5
commit 7d74351
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -320,7 +320,8 @@ Here the list of options:
 * ``lazySizesConfig.sizesAttr`` (default: ``"data-sizes"``): The attribute, which should be transformed to ``sizes``. Makes almost only makes sense with the value ``"auto"``. Otherwise the ``sizes`` attribute should be used directly.
 * ``lazySizesConfig.customMedia`` (default: ``{}``): The ``customMedia`` option object is an alias map for different media queries. It can be used to separate/centralize your multiple specific media queries implementation (layout) from the ``source[media]`` attribute (content/structure) by creating labeled media queries. (See also the [custommedia extension](plugins/custommedia)).
 * ``lazySizesConfig.loadHidden`` (default: ``true``): Wether to load `visibility: hidden` elements.
-* ``lazySizesConfig.ricTimeout`` (default: ``300``): The timeout option used for the `requestIdleCallback`. Reasonable values between: 50 - 1000.
+* ``lazySizesConfig.ricTimeout`` (default: ``100``): The timeout option used for the `requestIdleCallback`. Reasonable values between: 50 - 1000.
+* ``lazySizesConfig.throttleDelay`` (default: ``125``): The timeout option used to throttle all listeners. Reasonable values between: 66 - 200.
 ```html
 <script>
 window.lazySizesConfig = window.lazySizesConfig || {};

diff --git a/lazysizes-umd.js b/lazysizes-umd.js
@@ -166,14 +166,14 @@
 	var throttle = function(fn){
 		var running;
 		var lastTime = 0;
-		var gDelay = 125;
+		var gDelay = lazySizesConfig.throttleDelay;
 		var rICTimeout = lazySizesConfig.ricTimeout;
 		var run = function(){
 			running = false;
 			lastTime = Date.now();
 			fn();
 		};
-		var idleCallback = requestIdleCallback && lazySizesConfig.ricTimeout ?
+		var idleCallback = requestIdleCallback && rICTimeout > 49 ?
 			function(){
 				requestIdleCallback(run, {timeout: rICTimeout});
 
@@ -205,7 +205,7 @@
 				delay = 0;
 			}
 
-			if(isPriority || (delay < 9 && requestIdleCallback)){
+			if(isPriority || delay < 9){
 				idleCallback();
 			} else {
 				setTimeout(idleCallback, delay);
@@ -262,7 +262,8 @@
 			hFac: 0.8,
 			loadMode: 2,
 			loadHidden: true,
-			ricTimeout: 300,
+			ricTimeout: 100,
+			throttleDelay: 125,
 		};
 
 		lazySizesConfig = window.lazySizesConfig || window.lazysizesConfig || {};

diff --git a/lazysizes-umd.min.js b/lazysizes-umd.min.js
diff --git a/lazysizes.js b/lazysizes.js
@@ -163,14 +163,14 @@
 	var throttle = function(fn){
 		var running;
 		var lastTime = 0;
-		var gDelay = 125;
+		var gDelay = lazySizesConfig.throttleDelay;
 		var rICTimeout = lazySizesConfig.ricTimeout;
 		var run = function(){
 			running = false;
 			lastTime = Date.now();
 			fn();
 		};
-		var idleCallback = requestIdleCallback && lazySizesConfig.ricTimeout ?
+		var idleCallback = requestIdleCallback && rICTimeout > 49 ?
 			function(){
 				requestIdleCallback(run, {timeout: rICTimeout});
 
@@ -202,7 +202,7 @@
 				delay = 0;
 			}
 
-			if(isPriority || (delay < 9 && requestIdleCallback)){
+			if(isPriority || delay < 9){
 				idleCallback();
 			} else {
 				setTimeout(idleCallback, delay);
@@ -259,7 +259,8 @@
 			hFac: 0.8,
 			loadMode: 2,
 			loadHidden: true,
-			ricTimeout: 300,
+			ricTimeout: 100,
+			throttleDelay: 125,
 		};
 
 		lazySizesConfig = window.lazySizesConfig || window.lazysizesConfig || {};