small improvement to the expand algorithm

scantist-ossops-m2 · Jan 15, 2015 · 0e346c0 · 0e346c0
1 parent 25a94b0
commit 0e346c0
Show file tree

Hide file tree

Showing 11 changed files with 35 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -39,10 +39,11 @@
 
 1. **Works without any configuration in any web enviroment**: The script works as an universal, self-initializing, self-configuring and self-destroying component and detects any changes to the visibility of an image/iframe automatically no matter whether it becomes visible through a user scroll, a CSS animation triggered through ``:hover`` or through any kind of JS behavior (carousel, infinite scroll, AJAX, SPA...). Also works in conjunction with any kind of JS-/Frontend-Framework.
 2. **Future-proof**: It directly includes standard responsive image support (``picture`` and ``srcset``)
-3. **Separation of concerns**: For responsive image support it adds an automatic ``sizes`` calculation feature.
+3. **Separation of concerns**: For responsive image support it adds an automatic ``sizes`` calculation feature. There is also no change needed if you add a scrollable container with CSS (overflow: auto) or create a mega menu containing images.
 4. **Performance**: It's based on high efficient code (runtime **and** memory) to work jank-free at 60fps.
 5. **Extendable**: It provides JS and CSS hooks to extend lazySizes with any kind of lazy loading or effects.
-6. **Intelligent prefetch**: lazySizes prefetches near the view assets, while the browser network is idling. (see also ``threshold`` option)
+6. **Intelligent prefetch**: lazySizes prefetches near the view assets, only while the browser network is idling. (see also ``expand`` option)
+7. **Lightweight, but mature solution**
 
 ##[Demo with code examples](http://afarkas.github.io/lazysizes/#examples)
 Can be seen [here](http://afarkas.github.io/lazysizes/#examples).
@@ -261,6 +262,25 @@ window.lazySizesConfig = {
 </script>
 ```
 
+The ``lazybeforeunveil`` can also be used for lazy initialization and due to the fact that lazySizes also detects new elements in the DOM automatically also for auto- and self-initialization of UI widgets:
+
+```html
+<script>
+document.addEventListener('lazybeforeunveil', function(e){
+    $(e.target)
+        .filter('.slider')
+        .slider({
+            sliderOption: true
+        })
+    ;
+});
+</script>
+
+<div class="slider lazyload">
+
+</div>
+```
+
 * ``lazybeforesizes``: This event will be fired on each element with the ``data-sizes="auto"`` attribute right before the calculated ``sizes`` attribute will be set. The ``event.details.width`` property is set to the calculated width of the element and can be changed to any number. In case the event is ``defaultPrevented`` the ``sizes`` attribute won't be set.
 
 ####JS API - methods

diff --git a/lazysizes.js b/lazysizes.js
@@ -135,7 +135,7 @@
 
 		var shrinkExpand = -2;
 		var defaultExpand = shrinkExpand;
-		var preloadExpand = 60;
+		var preloadExpand = 120;
 		var currentExpand = defaultExpand;
 		var isExpandCalculated = true;
 		var lowRuns = 0;
@@ -424,7 +424,7 @@
 			} else {
 				document.addEventListener('DOMContentLoaded', throttledCheckElements, false);
 				addEventListener('load', onload, false);
-				setTimeout(onload, 9999);
+				setTimeout(onload, 12000);
 				throttledCheckElements();
 			}
 

diff --git a/lazysizes.min.js b/lazysizes.min.js
diff --git a/no-src.html b/no-src.html
@@ -90,13 +90,13 @@
 
 		[data-expand].lazyload {
 			opacity: 0;
-			transform: scale(0.8);
+			transform: scale(0.8) translateY(-100px);
 		}
 
 		[data-expand].lazyloaded {
 			opacity: 1;
 			transition: all 700ms;
-			transform: scale(1);
+			transform: scale(1) translateY(0px);
 		}
 
 		.effect-row-middle  > [data-expand]:nth-child(2),

diff --git a/plugins/bgset/ls.bgset.min.js b/plugins/bgset/ls.bgset.min.js