Alexander Farkas aFarkas

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script>
		window.lazySizesConfig = window.lazySizesConfig || {};

		window.lazySizesConfig.ricTimeout = 0; // test: 0, 50, 100, 300
		window.lazySizesConfig.throttleDelay = 40; //test: 0, 40, 100

## lazysizes-without-ric.js
(function(window, factory) {
	var lazySizes = factory(window, window.document);
	window.lazySizes = lazySizes;
	if(typeof module == 'object' && module.exports){
		module.exports = lazySizes;
	}
}(window, function l(window, document) {
	'use strict';
	/*jshint eqnull:true */
	if(!document.getElementsByClassName){return;}

## webpack-problem_.idea_encodings.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="Encoding">
    <file url="PROJECT" charset="UTF-8" />
  </component>
</project>

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- we use 'preload_' instead of 'preload' to make it testable in chrome -->
    <link rel="preload_" onload="console.log(this, 'script');" href="http://code.jquery.com/jquery-1.12.1.js" as="script" />
    <link rel="preload_" onload="console.log(this, 'style');" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" as="style" />
    <link rel="preload_" onload="console.log(this, 'font');" href="LatoLatin-Regular.woff" as="font" type="font/woff" crossorigin="" />

## pf-size.js
/*! Picturefill - v3.0.2 - 2016-02-02
 * http://scottjehl.github.io/picturefill
 * Copyright (c) 2016 https://github.com/scottjehl/picturefill/blob/master/Authors.txt; Licensed MIT
 */
!function(a){var b=navigator.userAgent;a.HTMLPictureElement&&/ecko/.test(b)&&b.match(/rv\:(\d+)/)&&RegExp.$1<45&&addEventListener("resize",function(){var b,c=document.createElement("source"),d=function(a){var b,d,e=a.parentNode;"PICTURE"===e.nodeName.toUpperCase()?(b=c.cloneNode(),e.insertBefore(b,e.firstElementChild),setTimeout(function(){e.removeChild(b)})):(!a._pfLastSize||a.offsetWidth>a._pfLastSize)&&(a._pfLastSize=a.offsetWidth,d=a.sizes,a.sizes+=",100vw",setTimeout(function(){a.sizes=d}))},e=function(){var a,b=document.querySelectorAll("picture > img, img[srcset][sizes]");for(a=0;a<b.length;a++)d(b[a])},f=function(){clearTimeout(b),b=setTimeout(e,99)},g=a.matchMedia&&matchMedia("(orientation: landscape)"),h=function(){f(),g&&g.addListener&&g.addListener(f)};return c.srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKA

## sizes-detection.js
(function(){
	'use strict';
	var width2 = 'data:image/gif;base64,R0lGODlhAgABAPAAAP///wAAACH5BAAAAAAALAAAAAACAAEAAAICBAoAOw==';
	var width1 = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
	var img = document.createElement('img');
	var test = function(){
		var width = img.width;

		if(width == 2){
			alert('your browser support sizes');

## focus-within.js
(function(window, document){
	'use strict';
	var slice = [].slice;
	var removeClass = function(elem){
		elem.classList.remove('focus-within');
	};
	var update = (function(){
		var running, last;
		var action = function(){
			var element = document.activeElement;

## imgloaded.js
/**
 * How to:
 * $('div.container').imagesLoaded(function(){console.log('all images loaded in .container');});
 * In case you need to support IE8, you need to use HTML5shiv **and** need to modify jQuery the following way:
 * https://github.com/jquery/jquery/commit/a9533893b9e5e9a248139f5794c5d6099382cf14
 */
(function($){
	'use strict';
	$.fn.imagesLoaded = (function(){
		var imageLoaded = function (img, cb, delay){

## maxres-.html
<!-
  2x device and viewport 1000px: 2000.jpg (i.e.: 2dpr res)

  3x device and viewport 1000px: 2000.jpg (i.e.: 2dpr res) <- constrained
  3x device and viewport 1500px: 3000.jpg (i.e.: 2dpr res) <- constrained
->
<img srcset="500.jpg 500w, 1000.jpg 1000w, 1500.jpg 1500w, 2000.jpg 2000w, 3000jpg 3000w, 4000jpg 4000w" maxdpr="2" sizes="100vw" />

## maxres.html
<!-- if you have 3dpr choose logo3x.png -->
<img src="logo.png" srcset="logo2x.png 200w, logo3x.png 300w" sizes="100px" />

<!--
if you have 3dpr and sizes computes to 100px choose img2.jpg
but if you have 2dpr and sizes computes to 150px take img3.jpg
-->
<img src="img.jpg" srcset="img2.jpg 200w, img3.jpg 300w" maxdpr="2" sizes="100px" />
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script>
	window.lazySizesConfig = window.lazySizesConfig \|\| {};

	window.lazySizesConfig.ricTimeout = 0; // test: 0, 50, 100, 300
	window.lazySizesConfig.throttleDelay = 40; //test: 0, 40, 100
	(function(window, factory) {
	var lazySizes = factory(window, window.document);
	window.lazySizes = lazySizes;
	if(typeof module == 'object' && module.exports){
	module.exports = lazySizes;
	}
	}(window, function l(window, document) {
	'use strict';
	/jshint eqnull:true /
	if(!document.getElementsByClassName){return;}
	<?xml version="1.0" encoding="UTF-8"?>
	<project version="4">
	<component name="Encoding">
	<file url="PROJECT" charset="UTF-8" />
	</component>
	</project>
	/*! Picturefill - v3.0.2 - 2016-02-02
	* http://scottjehl.github.io/picturefill
	* Copyright (c) 2016 https://github.com/scottjehl/picturefill/blob/master/Authors.txt; Licensed MIT
	*/
	!function(a){var b=navigator.userAgent;a.HTMLPictureElement&&/ecko/.test(b)&&b.match(/rv\:(\d+)/)&&RegExp.$1<45&&addEventListener("resize",function(){var b,c=document.createElement("source"),d=function(a){var b,d,e=a.parentNode;"PICTURE"===e.nodeName.toUpperCase()?(b=c.cloneNode(),e.insertBefore(b,e.firstElementChild),setTimeout(function(){e.removeChild(b)})):(!a._pfLastSize\|\|a.offsetWidth>a._pfLastSize)&&(a._pfLastSize=a.offsetWidth,d=a.sizes,a.sizes+=",100vw",setTimeout(function(){a.sizes=d}))},e=function(){var a,b=document.querySelectorAll("picture > img, img[srcset][sizes]");for(a=0;a<b.length;a++)d(b[a])},f=function(){clearTimeout(b),b=setTimeout(e,99)},g=a.matchMedia&&matchMedia("(orientation: landscape)"),h=function(){f(),g&&g.addListener&&g.addListener(f)};return c.srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKA
	(function(){
	'use strict';
	var width2 = 'data:image/gif;base64,R0lGODlhAgABAPAAAP///wAAACH5BAAAAAAALAAAAAACAAEAAAICBAoAOw==';
	var width1 = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
	var img = document.createElement('img');
	var test = function(){
	var width = img.width;

	if(width == 2){
	alert('your browser support sizes');
	(function(window, document){
	'use strict';
	var slice = [].slice;
	var removeClass = function(elem){
	elem.classList.remove('focus-within');
	};
	var update = (function(){
	var running, last;
	var action = function(){
	var element = document.activeElement;
	/**
	* How to:
	* $('div.container').imagesLoaded(function(){console.log('all images loaded in .container');});
	* In case you need to support IE8, you need to use HTML5shiv and need to modify jQuery the following way:
	* https://github.com/jquery/jquery/commit/a9533893b9e5e9a248139f5794c5d6099382cf14
	*/
	(function($){
	'use strict';
	$.fn.imagesLoaded = (function(){
	var imageLoaded = function (img, cb, delay){
	<!-
	2x device and viewport 1000px: 2000.jpg (i.e.: 2dpr res)

	3x device and viewport 1000px: 2000.jpg (i.e.: 2dpr res) <- constrained
	3x device and viewport 1500px: 3000.jpg (i.e.: 2dpr res) <- constrained
	->
	<img srcset="500.jpg 500w, 1000.jpg 1000w, 1500.jpg 1500w, 2000.jpg 2000w, 3000jpg 3000w, 4000jpg 4000w" maxdpr="2" sizes="100vw" />
	<!-- if you have 3dpr choose logo3x.png -->
	<img src="logo.png" srcset="logo2x.png 200w, logo3x.png 300w" sizes="100px" />

	<!--
	if you have 3dpr and sizes computes to 100px choose img2.jpg
	but if you have 2dpr and sizes computes to 150px take img3.jpg
	-->
	<img src="img.jpg" srcset="img2.jpg 200w, img3.jpg 300w" maxdpr="2" sizes="100px" />