rs3d/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://rawgit.com/desandro/imagesloaded/master/imagesloaded.pkgd.js"></script>
<script src="https://rawgit.com/scottjehl/picturefill/master/src/picturefill.js"></script>
  <style>
  img {
    display: block;
    width: 100%;
    height: auto;
  }
  </style>
</head>
<body>

  <div class="container"></div>
  <pre></pre>
  <button>Reload</button>

<script id="jsbin-javascript">
function waitForComputedSrcset (imageList, resolver) {
       var computed = 0,
        length = imageList.length;

    for (var i = 0; i < length; i++) {
        if (imageList [i].hasOwnProperty('currentSrc') && !! !imageList[i].currentSrc) {
            window.setTimeout(this.waitForComputedSrcset.bind(this, imageList, resolver), 100);
            return;
        }
        computed++;
    }
    return (length === computed) ? resolver(imageList) : null;
}

function reload() {

var rand = Math.random().toString(36).substring(7),
    container = document.querySelector('.container'),
    output = document.querySelector('pre')
    ;
  container.innerHTML = '<picture><\!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="http://scottjehl.github.io/picturefill/examples/images/extralarge.jpg?'+rand+'" media="(min-width: 1000px)"><source srcset="http://scottjehl.github.io/picturefill/examples/images/large.jpg?'+rand+'" media="(min-width: 800px)"><\!--[if IE 9]></video><![endif]--><img srcset="http://scottjehl.github.io/picturefill/examples/images/medium.jpg?'+rand+' w375" src="http://scottjehl.github.io/picturefill/examples/images/small.jpg?'+rand+'" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></picture>';


picturefill();

var imageList = document.querySelectorAll('img');

output.innerHTML = '';
output.innerHTML += 'Height before preloader: '+ container.clientHeight+'px'+"\n";

waitForComputedSrcset(imageList, function(images) {
  var length = images.length;
for (var i = 0; i < length; i++) {
if (images[i].hasOwnProperty('currentSrc') && !! !images[i].currentSrc) {
images.src = images[i].currentSrc;
}
}
  imagesLoaded( container, function( instance ) {
  output.innerHTML += 'Height after preloader: '+ container.clientHeight+'px '+"\n";
});
});


  /*
Array.prototype.forEach.call(imageList,function(image, i){
    console.log(image, image.currentSrc);
});
  */
}

reload();

document.querySelector('button').addEventListener('click', reload, false);
</script>


<script id="jsbin-source-javascript" type="text/javascript">function waitForComputedSrcset (imageList, resolver) {
       var computed = 0,
        length = imageList.length;

    for (var i = 0; i < length; i++) {
        if (imageList [i].hasOwnProperty('currentSrc') && !! !imageList[i].currentSrc) {
            window.setTimeout(this.waitForComputedSrcset.bind(this, imageList, resolver), 100);
            return;
        }
        computed++;
    }
    return (length === computed) ? resolver(imageList) : null;
}

function reload() {

var rand = Math.random().toString(36).substring(7),
    container = document.querySelector('.container'),
    output = document.querySelector('pre')
    ;
  container.innerHTML = '<picture><\!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="http://scottjehl.github.io/picturefill/examples/images/extralarge.jpg?'+rand+'" media="(min-width: 1000px)"><source srcset="http://scottjehl.github.io/picturefill/examples/images/large.jpg?'+rand+'" media="(min-width: 800px)"><\!--[if IE 9]></video><![endif]--><img srcset="http://scottjehl.github.io/picturefill/examples/images/medium.jpg?'+rand+' w375" src="http://scottjehl.github.io/picturefill/examples/images/small.jpg?'+rand+'" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></picture>';


picturefill();

var imageList = document.querySelectorAll('img');

output.innerHTML = '';
output.innerHTML += 'Height before preloader: '+ container.clientHeight+'px'+"\n";

waitForComputedSrcset(imageList, function(images) {
  var length = images.length;
for (var i = 0; i < length; i++) {
if (images[i].hasOwnProperty('currentSrc') && !! !images[i].currentSrc) {
images.src = images[i].currentSrc;
}
}
  imagesLoaded( container, function( instance ) {
  output.innerHTML += 'Height after preloader: '+ container.clientHeight+'px '+"\n";
});
});


  /*
Array.prototype.forEach.call(imageList,function(image, i){
    console.log(image, image.currentSrc);
});
  */
}

reload();

document.querySelector('button').addEventListener('click', reload, false);</script></body>
</html>

## jsbin.jumuho.js
function waitForComputedSrcset (imageList, resolver) {
       var computed = 0,
        length = imageList.length;

    for (var i = 0; i < length; i++) {
        if (imageList [i].hasOwnProperty('currentSrc') && !! !imageList[i].currentSrc) {
            window.setTimeout(this.waitForComputedSrcset.bind(this, imageList, resolver), 100);
            return;
        }
        computed++;
    }
    return (length === computed) ? resolver(imageList) : null;
}

function reload() {

var rand = Math.random().toString(36).substring(7),
    container = document.querySelector('.container'),
    output = document.querySelector('pre')
    ;
  container.innerHTML = '<picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="http://scottjehl.github.io/picturefill/examples/images/extralarge.jpg?'+rand+'" media="(min-width: 1000px)"><source srcset="http://scottjehl.github.io/picturefill/examples/images/large.jpg?'+rand+'" media="(min-width: 800px)"><!--[if IE 9]></video><![endif]--><img srcset="http://scottjehl.github.io/picturefill/examples/images/medium.jpg?'+rand+' w375" src="http://scottjehl.github.io/picturefill/examples/images/small.jpg?'+rand+'" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></picture>';


picturefill();

var imageList = document.querySelectorAll('img');

output.innerHTML = '';
output.innerHTML += 'Height before preloader: '+ container.clientHeight+'px'+"\n";

waitForComputedSrcset(imageList, function(images) {
  var length = images.length;
for (var i = 0; i < length; i++) {
if (images[i].hasOwnProperty('currentSrc') && !! !images[i].currentSrc) {
images.src = images[i].currentSrc;
}
}
  imagesLoaded( container, function( instance ) {
  output.innerHTML += 'Height after preloader: '+ container.clientHeight+'px '+"\n";
});
});


  /*
Array.prototype.forEach.call(imageList,function(image, i){
    console.log(image, image.currentSrc);
});
  */
}

reload();

document.querySelector('button').addEventListener('click', reload, false);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<script src="https://rawgit.com/desandro/imagesloaded/master/imagesloaded.pkgd.js"></script>
	<script src="https://rawgit.com/scottjehl/picturefill/master/src/picturefill.js"></script>
	<style>
	img {
	display: block;
	width: 100%;
	height: auto;
	}
	</style>
	</head>
	<body>

	<div class="container"></div>
	<pre></pre>
	<button>Reload</button>

	<script id="jsbin-javascript">
	function waitForComputedSrcset (imageList, resolver) {
	var computed = 0,
	length = imageList.length;

	for (var i = 0; i < length; i++) {
	if (imageList [i].hasOwnProperty('currentSrc') && !! !imageList[i].currentSrc) {
	window.setTimeout(this.waitForComputedSrcset.bind(this, imageList, resolver), 100);
	return;
	}
	computed++;
	}
	return (length === computed) ? resolver(imageList) : null;
	}

	function reload() {

	var rand = Math.random().toString(36).substring(7),
	container = document.querySelector('.container'),
	output = document.querySelector('pre')
	;
	container.innerHTML = '<picture><\!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="http://scottjehl.github.io/picturefill/examples/images/extralarge.jpg?'+rand+'" media="(min-width: 1000px)"><source srcset="http://scottjehl.github.io/picturefill/examples/images/large.jpg?'+rand+'" media="(min-width: 800px)"><\!--[if IE 9]></video><![endif]--><img srcset="http://scottjehl.github.io/picturefill/examples/images/medium.jpg?'+rand+' w375" src="http://scottjehl.github.io/picturefill/examples/images/small.jpg?'+rand+'" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></picture>';


	picturefill();

	var imageList = document.querySelectorAll('img');

	output.innerHTML = '';
	output.innerHTML += 'Height before preloader: '+ container.clientHeight+'px'+"\n";

	waitForComputedSrcset(imageList, function(images) {
	var length = images.length;
	for (var i = 0; i < length; i++) {
	if (images[i].hasOwnProperty('currentSrc') && !! !images[i].currentSrc) {
	images.src = images[i].currentSrc;
	}
	}
	imagesLoaded( container, function( instance ) {
	output.innerHTML += 'Height after preloader: '+ container.clientHeight+'px '+"\n";
	});
	});


	/*
	Array.prototype.forEach.call(imageList,function(image, i){
	console.log(image, image.currentSrc);
	});
	*/
	}

	reload();

	document.querySelector('button').addEventListener('click', reload, false);
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">function waitForComputedSrcset (imageList, resolver) {
	var computed = 0,
	length = imageList.length;

	for (var i = 0; i < length; i++) {
	if (imageList [i].hasOwnProperty('currentSrc') && !! !imageList[i].currentSrc) {
	window.setTimeout(this.waitForComputedSrcset.bind(this, imageList, resolver), 100);
	return;
	}
	computed++;
	}
	return (length === computed) ? resolver(imageList) : null;
	}

	function reload() {

	var rand = Math.random().toString(36).substring(7),
	container = document.querySelector('.container'),
	output = document.querySelector('pre')
	;
	container.innerHTML = '<picture><\!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="http://scottjehl.github.io/picturefill/examples/images/extralarge.jpg?'+rand+'" media="(min-width: 1000px)"><source srcset="http://scottjehl.github.io/picturefill/examples/images/large.jpg?'+rand+'" media="(min-width: 800px)"><\!--[if IE 9]></video><![endif]--><img srcset="http://scottjehl.github.io/picturefill/examples/images/medium.jpg?'+rand+' w375" src="http://scottjehl.github.io/picturefill/examples/images/small.jpg?'+rand+'" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></picture>';


	picturefill();

	var imageList = document.querySelectorAll('img');

	output.innerHTML = '';
	output.innerHTML += 'Height before preloader: '+ container.clientHeight+'px'+"\n";

	waitForComputedSrcset(imageList, function(images) {
	var length = images.length;
	for (var i = 0; i < length; i++) {
	if (images[i].hasOwnProperty('currentSrc') && !! !images[i].currentSrc) {
	images.src = images[i].currentSrc;
	}
	}
	imagesLoaded( container, function( instance ) {
	output.innerHTML += 'Height after preloader: '+ container.clientHeight+'px '+"\n";
	});
	});


	/*
	Array.prototype.forEach.call(imageList,function(image, i){
	console.log(image, image.currentSrc);
	});
	*/
	}

	reload();

	document.querySelector('button').addEventListener('click', reload, false);</script></body>
	</html>