Created
December 27, 2014 22:33
-
-
Save anonymous/a30fa12bbe3fa37c0b54 to your computer and use it in GitHub Desktop.
// source http://jsbin.com/gihapimifa
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| a, img{ | |
| display: block; | |
| } | |
| a{ | |
| width:100px; | |
| } | |
| img{ | |
| max-width: 100%; | |
| height: auto; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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?"); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment