1.2.0-rc2

aFarkas · Aug 23, 2015 · baf2ef2 · baf2ef2
1 parent f2a421f
commit baf2ef2
Show file tree

Hide file tree

Showing 25 changed files with 82 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -53,8 +53,8 @@ Lazysizes is built upon the Responsive image standard and extends it with additi
 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 as also alias names for media queries feature. There is also no JS 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 highly efficient, best practice code (runtime **and** memory) to work jank-free at 60fps and can be used with hundreds of images/iframes on CSS and JS-heavy pages or webapps.
-5. **Extendable**: It provides JS and CSS hooks to extend lazysizes with any kind of lazy loading, lazy instantiation, inview callbacks or effects (see also the [available plugins/snippets](#plugins)).
-6. **Intelligent prefetch/Intelligent resource prioritization**: lazysizes prefetches/preloads near the view assets to improve user experience, but only while the browser network is idling. (see also ``expand``, ``expFactor`` and ``loadMode`` options)
+5. **Extendable**: It provides JS and CSS hooks to extend lazysizes with any kind of lazy loading, lazy instantiation, in view callbacks or effects (see also the [available plugins/snippets](#plugins)).
+6. **Intelligent prefetch/Intelligent resource prioritization**: lazysizes prefetches/preloads near the view assets to improve user experience, but only while the browser network is idling (see also ``expand``, ``expFactor`` and ``loadMode`` options). This way in view elements are loaded faster and near of view images are preloaded lazily before they come into view.
 7. **Lightweight, but mature solution**: lazysizes has the right balance between a lightweight and a fast, reliable solution
 8. **SEO improved**: lazysizes does not hide images/assets from google. No matter what markup pattern you use!
 
@@ -76,8 +76,9 @@ Add the ``class`` ``lazyload`` to all ``img`` and ``iframe`` elements, which sho
 <img
 	data-sizes="auto"
 	data-srcset="responsive-image1.jpg 300w,
-    responsive-image2.jpg 600w,
-    responsive-image3.jpg 900w" class="lazyload" />
+	    responsive-image2.jpg 600w,
+	    responsive-image3.jpg 900w"
+    class="lazyload" />
 ```
 
 **Important: How ``sizes`` is calculated**: The automatic sizes calculation uses the width of the image. If it is below ``40`` (can be configured through the ``minSize`` option), lazysizes traverses up the DOM tree until it finds a parent which is over ``40`` and uses this number. Often the following general CSS rule might help: ``img[data-sizes="auto"] { display: block; width: 100%; }`` (see also [specifying image/iframe dimensions](#specify-dimensions)).
@@ -86,7 +87,7 @@ The ``data-sizes="auto"`` feature only makes sense if you use the ``data-srcset`
 
 ##Recommended/possible markup patterns
 
-lazySizes allows you to write multiple different markup patterns. Find your own/best pattern or choose one of the following.
+lazysizes allows you to write multiple different markup patterns. Find your own/best pattern or choose one of the following.
 
 ###Simple pattern
 
@@ -130,7 +131,7 @@ If you are using the LQIP (Low Quality Image Placeholder) pattern, simply add a
 <img src="lqip-src.jpg" data-src="image.jpg" class="lazyload" />
 ```
 
-###``data-srcset`` with ``data-src`` (i.e.: without a polyfill)
+###Combine ``data-srcset`` with ``data-src``
 
 In case you want to use responsive images for supporting browsers, but don't want to include a polyfill, simply combine your ``data-srcset`` with a ``data-src`` attribute.
 
@@ -140,11 +141,14 @@ In case you want to use responsive images for supporting browsers, but don't wan
 	data-sizes="auto"
     data-src="image3.jpg"
 	data-srcset="lqip-src.jpg 220w,
-    image2.jpg 300w,
-    image3.jpg 600w,
-    image4.jpg 900w" class="lazyload" />
+	    image2.jpg 300w,
+	    image3.jpg 600w,
+	    image4.jpg 900w"
+	class="lazyload" />
 ```
 
+Note: Due to the fact that the ``data-src`` will also be picked up by "Read-Later" Apps, this pattern also makes sense if you use a polyfill.
+
 ###The noscript pattern
 
 In case disabled JavaScript is a concern you can combine this simple pattern with an image inside a ``noscript`` element.

diff --git a/component.json b/component.json
@@ -1,6 +1,6 @@
 {
 	"name": "lazysizes",
-	"version": "1.2.0-rc1",
+	"version": "1.2.0-rc2",
 	"repo": "afarkas/lazysizes",
 	"main": "lazysizes.min.js",
 	"scripts": ["lazysizes.min.js"],

diff --git a/index.html b/index.html
@@ -350,10 +350,10 @@ <h3>iframe</h3>
 				</div>
 			<div class="col-sm-6">
 				<div class="caption">
-					<h3><code>[data-expand]</code> + <code>addClasses</code>: More than lazyloading</h3>
+					<h3><code>[data-expand]</code>: More than lazyloading</h3>
 					<p>LazySizes normally loads in view elements as fast as possible and near the view elements are lazily pre-loaded. This can be modified in general using the <code>expand</code> option. With the <code>data-expand</code> attribute this can be changed element specific to expand or shrink the viewport.</p>
 
-					<p>In conjunction with the <code>addClasses</code> option this can be used to create unveiling effects for elements with or even without loading anything.</p>
+					<p>This can be used to create unveiling effects for elements with or even without loading anything.</p>
 <pre>
 &lt;style&gt;
 .teaser.lazyload {

diff --git a/lazysizes.js b/lazysizes.js
@@ -120,11 +120,11 @@
 	};
 
 	var loader = (function(){
-		var lazyloadElems, preloadElems, isCompleted, resetPreloadingTimer, loadMode;
+		var lazyloadElems, preloadElems, isCompleted, resetPreloadingTimer, loadMode, started;
 
 		var eLvW, elvH, eLtop, eLleft, eLright, eLbottom;
 
-		var defaultExpand, preloadExpand;
+		var _defaultExpand, scrollingExpand, defaultExpand, preloadExpand;
 
 		var regImg = /^img$/i;
 		var regIframe = /^iframe$/i;
@@ -136,7 +136,6 @@
 
 		var isLoading = 0;
 		var lowRuns = 0;
-		var started = Date.now();
 
 		var resetPreloading = function(e){
 			isLoading--;
@@ -376,18 +375,21 @@
 			var scrollTimer;
 			var afterScroll = function(){
 				lazySizesConfig.loadMode = 3;
+				defaultExpand = _defaultExpand;
 				throttledCheckElements();
 			};
 
 			isCompleted = true;
 
 			lazySizesConfig.loadMode = 3;
+
 			if(!isLoading){
 				throttledCheckElements();
 			}
 
 			addEventListener('scroll', function(){
 				if(lazySizesConfig.loadMode == 3){
+					defaultExpand = scrollingExpand;
 					lazySizesConfig.loadMode = 2;
 				}
 				clearTimeout(scrollTimer);
@@ -432,12 +434,15 @@
 
 		return {
 			_: function(){
+				started = Date.now();
 
 				lazyloadElems = document.getElementsByClassName(lazySizesConfig.lazyClass);
 				preloadElems = document.getElementsByClassName(lazySizesConfig.lazyClass + ' ' + lazySizesConfig.preloadClass);
 
 				defaultExpand = lazySizesConfig.expand;
-				preloadExpand = Math.round(defaultExpand * lazySizesConfig.expFactor);
+				_defaultExpand = defaultExpand;
+				scrollingExpand = defaultExpand * ((lazySizesConfig.expFactor + 1) / 2);
+				preloadExpand = defaultExpand * lazySizesConfig.expFactor;
 
 				addEventListener('scroll', throttledCheckElements, true);
 

diff --git a/lazysizes.min.js b/lazysizes.min.js
diff --git a/no-src.html b/no-src.html
@@ -357,10 +357,10 @@ <h3>iframe</h3>
 			</div>
 			<div class="col-sm-6">
 				<div class="caption">
-					<h3><code>[data-expand]</code> + <code>addClasses</code>: More than lazyloading</h3>
+					<h3><code>[data-expand]</code>: More than lazyloading</h3>
 					<p>LazySizes normally loads in view elements as fast as possible and near the view elements are lazily pre-loaded. This can be modified in general using the <code>expand</code> option. With the <code>data-expand</code> attribute this can be changed element specific to expand or shrink the viewport.</p>
 
-					<p>In conjunction with the <code>addClasses</code> option this can be used to create unveiling effects for elements with or even without loading anything.</p>
+					<p>This can be used to create unveiling effects for elements with or even without loading anything.</p>
 <pre>
 &lt;style&gt;
 .teaser.lazyload {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lazysizes",
-  "version": "1.2.0-rc1",
+  "version": "1.2.0-rc2",
   "filename": "lazysizes.min.js",
   "author": "Alexander Farkas <info@corrupt-system.de>",
   "repository": {