LostKobrakai/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
a, img{
  display: block;
}

a{
  width:100px;
}

img{
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>
<a href="#" class="link">
  <img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
</a>
  <a href="#" class="link">
  <img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
</a>
  <a href="#" class="link">
  <img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
</a>
  <a href="#" class="link">
  <img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
</a>
  <a href="#" class="link">
  <img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
</a>
  <a href="#" class="link">
  <img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
</a>
  <a href="#" class="link">
  <img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
</a>
  <a href="#" class="link">
  <img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
</a>
  <a href="#" class="link">
  <img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
</a>
  <a href="#" class="link">
  <img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
</a>
  <a href="#" class="link">
  <img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
</a>
  <a href="#" class="link">
  <img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
</a>
  <a href="#" class="link">
  <img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
</a>
  <a href="#" class="link">
  <img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
</a>
  <a href="#" class="link">
  <img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
</a>
<script id="jsbin-javascript">
console.log("Images do have Width/Height Attributes, but don't influence their parent size by now.");

var links = document.getElementsByClassName("link");


var link = links[links.length - 1];
var times = [];

var timer = setInterval(function(){
  if(!link.children[0].complete){
    times.push(link.clientHeight);
  }else{
    times.push("loaded");
    clearInterval(timer);
    console.log(times);
    finish();
  }
}, 10);

function finish(){
    console.log("Last image fully loaded. Images do influence their parent size now.");
    console.log("Is there any way to get the Point, where the size calculation is done?");
}
</script>


<script id="jsbin-source-css" type="text/css">a, img{
  display: block;
}

a{
  width:100px;
}

img{
  max-width: 100%;
  height: auto;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">console.log("Images do have Width/Height Attributes, but don't influence their parent size by now.");

var links = document.getElementsByClassName("link");


var link = links[links.length - 1];
var times = [];

var timer = setInterval(function(){
  if(!link.children[0].complete){
    times.push(link.clientHeight);
  }else{
    times.push("loaded");
    clearInterval(timer);
    console.log(times);
    finish();
  }
}, 10);

function finish(){
    console.log("Last image fully loaded. Images do influence their parent size now.");
    console.log("Is there any way to get the Point, where the size calculation is done?");
}</script></body>
</html>

## jsbin.gihapimifa.css
a, img{
  display: block;
}

a{
  width:100px;
}

img{
  max-width: 100%;
  height: auto;
}

## jsbin.gihapimifa.js
console.log("Images do have Width/Height Attributes, but don't influence their parent size by now.");

var links = document.getElementsByClassName("link");


var link = links[links.length - 1];
var times = [];

var timer = setInterval(function(){
  if(!link.children[0].complete){
    times.push(link.clientHeight);
  }else{
    times.push("loaded");
    clearInterval(timer);
    console.log(times);
    finish();
  }
}, 10);

function finish(){
    console.log("Last image fully loaded. Images do influence their parent size now.");
    console.log("Is there any way to get the Point, where the size calculation is done?");
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	a, img{
	display: block;
	}

	a{
	width:100px;
	}

	img{
	max-width: 100%;
	height: auto;
	}
	</style>
	</head>
	<body>
	<a href="#" class="link">
	<img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
	</a>
	<a href="#" class="link">
	<img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
	</a>
	<a href="#" class="link">
	<img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
	</a>
	<a href="#" class="link">
	<img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
	</a>
	<a href="#" class="link">
	<img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
	</a>
	<a href="#" class="link">
	<img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
	</a>
	<a href="#" class="link">
	<img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
	</a>
	<a href="#" class="link">
	<img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
	</a>
	<a href="#" class="link">
	<img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
	</a>
	<a href="#" class="link">
	<img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
	</a>
	<a href="#" class="link">
	<img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
	</a>
	<a href="#" class="link">
	<img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
	</a>
	<a href="#" class="link">
	<img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
	</a>
	<a href="#" class="link">
	<img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
	</a>
	<a href="#" class="link">
	<img src="http://lorempixel.com/1000/1000" alt="Test" width="1000" height="1000">
	</a>
	<script id="jsbin-javascript">
	console.log("Images do have Width/Height Attributes, but don't influence their parent size by now.");

	var links = document.getElementsByClassName("link");


	var link = links[links.length - 1];
	var times = [];

	var timer = setInterval(function(){
	if(!link.children[0].complete){
	times.push(link.clientHeight);
	}else{
	times.push("loaded");
	clearInterval(timer);
	console.log(times);
	finish();
	}
	}, 10);

	function finish(){
	console.log("Last image fully loaded. Images do influence their parent size now.");
	console.log("Is there any way to get the Point, where the size calculation is done?");
	}
	</script>


	<script id="jsbin-source-css" type="text/css">a, img{
	display: block;
	}

	a{
	width:100px;
	}

	img{
	max-width: 100%;
	height: auto;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">console.log("Images do have Width/Height Attributes, but don't influence their parent size by now.");

	var links = document.getElementsByClassName("link");


	var link = links[links.length - 1];
	var times = [];

	var timer = setInterval(function(){
	if(!link.children[0].complete){
	times.push(link.clientHeight);
	}else{
	times.push("loaded");
	clearInterval(timer);
	console.log(times);
	finish();
	}
	}, 10);

	function finish(){
	console.log("Last image fully loaded. Images do influence their parent size now.");
	console.log("Is there any way to get the Point, where the size calculation is done?");
	}</script></body>
	</html>