Skip to content

Instantly share code, notes, and snippets.

@rs3d

rs3d/index.html

Created October 25, 2014 09:59
Show Gist options
  • Save rs3d/c463ca58c6d720e3d36d to your computer and use it in GitHub Desktop.
Save rs3d/c463ca58c6d720e3d36d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Raw
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment