1.0.1

Gruntfile.js

@@ -11,7 +11,6 @@
 			// Metadata.
 			pkg: pkg = grunt.file.readJSON("bower.json"),
 			banner: "/*! <%= pkg.name %> - v<%= pkg.version %> - " +
-				"<%= grunt.template.today('yyyy-mm-dd') %>\n" +
 				" Licensed <%= pkg.license %> */\n",
 			// Task configuration.
 			uglify: {

README.md

@@ -195,7 +195,7 @@ window.lazySizesConfig.customMedia = {
 
 
 <picture>
-	<!--[if IE 9]><audio><![endif]-->
+	<!--[if IE 9]><video style="display: none;><![endif]-->
 	<source
 		data-srcset="http://placehold.it/500x600/11e87f/fff"
 		media="--small" />
@@ -207,14 +207,15 @@ window.lazySizesConfig.customMedia = {
 		media="--large" />
 	<source
         data-srcset="http://placehold.it/1800x900/117fe8/fff" />
-    <!--[if IE 9]></audio><![endif]-->
+    <!--[if IE 9]></video><![endif]-->
     <img
         src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
         class="lazyload"
         alt="image with artdirection" />
 </picture>
 ```
-* ``lazySizesConfig.expFactor`` (default: ``2``): The ``expFactor`` is used to calculate the preload expand, by multiplying the normal ``expand`` with the ``expFactor``, which is used to preload assets while the browser is idling (no more important network traffic and no scrolling).
+* ``lazySizesConfig.expFactor`` (default: ``2``): The ``expFactor`` is used to calculate the "preload expand", by multiplying the normal ``expand`` with the ``expFactor``, which is used to preload assets while the browser is idling (no important network traffic and no scrolling).
+* ``lazySizesConfig.loadMode`` (default: ``2``): The ``loadMode`` can be used to constrain the allowed loading mode. Possible values are 1 = only load visible elements, 2 = load also very near view elements (``expand`` option) and 3 = load also not so near elements (``expand`` * ``expFactor`` option). This value is automatically set to ``3`` after onload. Change this value to ``1`` if you (also) optimize for the onload event or change it to ``3`` if your onload event is already heavily delayed.
 * ``lazySizesConfig.init`` (default: ``true``): By default lazySizes initializes itself as soon as possible, to load inview assets as soon as possible. In the unlikely case you need to setup/configure something with a later script you can set this option to ``false`` and call ``lazySizes.init();`` later explicitly.
 
 ####JS API - events
@@ -526,7 +527,7 @@ In case the exact ratio of your image is unknown you can also vary the intrinsic
 ##Tip: Where/How to include lazySizes
 While lazy loading is a great feature, it is important for users that crucial inview images are loaded as fast as possible. (Most users start to interact with a page after inview images are loaded.)
 
-In case you normally combine all your scripts into one large script and add this to the bottom of your page. It can be better for perceived performance to generate two or sometimes three script packages.
+In case you normally combine all your scripts into one large script and add this to the bottom of your page. It can be better for perceived performance to generate two or sometimes more script packages.
 
 One small package, which includes all scripts which have heavy influence on the content or the UI and another larger one which includes the normal behavior of the page.
 

bower.json

@@ -1,7 +1,7 @@
 {
 	"name": "lazysizes",
 	"repo": "afarkas/lazysizes",
-	"version": "1.0.1-RC1",
+	"version": "1.0.1",
 	"main": "lazysizes.js",
 	"scripts": [
 		"lazysizes.js",

component.json

@@ -1,6 +1,6 @@
 {
 	"name": "lazysizes",
-	"version": "1.0.1-RC1",
+	"version": "1.0.1",
 	"repo": "afarkas/lazysizes",
 	"main": "lazysizes.min.js",
 	"scripts": ["lazysizes.min.js"],

lazysizes.js

@@ -114,7 +114,7 @@
 	};
 
 	var loader = (function(){
-		var lazyloadElems, preloadElems, isCompleted, resetPreloadingTimer;
+		var lazyloadElems, preloadElems, isCompleted, resetPreloadingTimer, loadMode;
 
 		var eLvW, elvH, eLtop, eLleft, eLright, eLbottom;
 
@@ -125,16 +125,14 @@
 
 		var supportScroll = ('onscroll' in window) && !(/glebot/.test(navigator.userAgent));
 
-		var shrinkExpand = 1;
-		var currentExpand = shrinkExpand;
+		var shrinkExpand = 0;
+		var currentExpand = 0;
 		var lowRuns = 0;
 
 		var isLoading = 0;
 
 		var checkElementsIndex = 0;
 
-		var loadMode = 2;
-
 		var resetPreloading = function(e){
 			isLoading--;
 			if(e && e.target){
@@ -161,8 +159,8 @@
 
 				if(visible && getCSS(parent, 'overflow') != 'visible'){
 					outerRect = parent.getBoundingClientRect();
-					visible = eLright > outerRect.left - 1 &&
-					eLleft < outerRect.right + 1 &&
+					visible = eLright > outerRect.left &&
+					eLleft < outerRect.right &&
 					eLbottom > outerRect.top - 1 &&
 					eLtop < outerRect.bottom + 1
 					;
@@ -176,7 +174,7 @@
 
 			var eLlen = lazyloadElems.length;
 
-			if(eLlen){
+			if(eLlen && (loadMode = lazySizesConfig.loadMode)){
 				start = Date.now();
 
 				i = checkElementsIndex;
@@ -235,7 +233,7 @@
 						}
 
 						if(!loadedSomething && isCompleted && !autoLoadElem &&
-							isLoading < 3 && lowRuns < 4 &&
+							isLoading < 3 && lowRuns < 4 && loadMode > 2 &&
 							(preloadElems[0] || lazySizesConfig.preloadAfterLoad) &&
 							(preloadElems[0] || (!elemExpandVal && ((eLbottom || eLright || eLleft || eLtop) || lazyloadElems[i].getAttribute(lazySizesConfig.sizesAttr) != 'auto')))){
 							autoLoadElem = preloadElems[0] || lazyloadElems[i];
@@ -280,6 +278,7 @@
 			if( (isAuto || !isCompleted) && isImg && curSrc && !elem.complete && !hasClass(elem, lazySizesConfig.errorClass)){return;}
 
 			elem._lazyRace = true;
+
 			if(!(event = triggerEvent(elem, 'lazybeforeunveil', {force: !!force})).defaultPrevented){
 
 				if(sizes){
@@ -363,19 +362,19 @@
 		var onload = function(){
 			var scrollTimer;
 			var afterScroll = function(){
-				loadMode = 3;
+				lazySizesConfig.loadMode = 3;
 				throttledCheckElements();
 			};
 
 			isCompleted = true;
 			lowRuns += 8;
 
-			loadMode = 3;
+			lazySizesConfig.loadMode = 3;
 			throttledCheckElements(true);
 
 			addEventListener('scroll', function(){
-				if(loadMode == 3){
-					loadMode = 2;
+				if(lazySizesConfig.loadMode == 3){
+					lazySizesConfig.loadMode = 2;
 				}
 				clearTimeout(scrollTimer);
 				scrollTimer = setTimeout(afterScroll, 66);
@@ -384,33 +383,6 @@
 
 		return {
 			_: function(){
-				var scrolled = 0;
-				var activateEvents = ['scroll', 'touchstart', 'click', 'mousedown'];
-
-				var addEvents = function(obj, evts, fn){
-					evts.forEach(function(name){
-						obj.addEventListener(name, fn, true);
-					});
-				};
-
-				var onActivate = function(e){
-					scrolled++;
-
-					if(e.type != 'scroll'){
-						scrolled = 9;
-					}
-
-					if(scrolled > 8 && loadMode < 2){
-						loadMode = 2;
-					}
-
-					if(loadMode > 1){
-						activateEvents.forEach(function(name){
-							removeEventListener(name, onActivate, true);
-						});
-					}
-				};
-				addEvents(window, activateEvents, onActivate);
 
 				lazyloadElems = document.getElementsByClassName(lazySizesConfig.lazyClass);
 				preloadElems = document.getElementsByClassName(lazySizesConfig.lazyClass + ' ' + lazySizesConfig.preloadClass);
@@ -432,7 +404,9 @@
 
 				addEventListener('hashchange', throttledCheckElements, true);
 
-				addEvents(document, ['transitionstart', 'transitionend', 'load', 'focus', 'mouseover', 'animationend', 'click'], throttledCheckElements);
+				['transitionstart', 'transitionend', 'load', 'focus', 'mouseover', 'animationend', 'click'].forEach(function(name){
+					document.addEventListener(name, throttledCheckElements, true);
+				});
 
 				if(!(isCompleted = /d$|^c/.test(document.readyState))){
 					addEventListener('load', onload);
@@ -532,7 +506,8 @@
 			customMedia: {},
 			init: true,
 			expFactor: 2,
-			expand: 300
+			expand: 300,
+			loadMode: 2
 		};
 
 		lazySizesConfig = window.lazySizesConfig || {};

no-src.html

@@ -131,10 +131,9 @@
 		}
 
 	</style>
-
 	<script src="plugins/unveilhooks/ls.unveilhooks.min.js" async=""></script>
 
-	<script src="lazysizes.js" async=""></script>
+	<script src="lazysizes.min.js" async=""></script>
 
 </head>
 <body>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lazysizes",
-  "version": "1.0.1-RC1",
+  "version": "1.0.1",
   "filename": "lazysizes.min.js",
   "author": "Alexander Farkas <info@corrupt-system.de>",
   "repository": {