Skip to content

Instantly share code, notes, and snippets.

@smnh

smnh/web-font-loading-detection-without-timers.html

Created April 9, 2014 22:25
Show Gist options
  • Save smnh/10325009 to your computer and use it in GitHub Desktop.
Save smnh/10325009 to your computer and use it in GitHub Desktop.
Download ZIP
Web font loading detection, without timers
Raw
web-font-loading-detection-without-timers.html
<!DOCTYPE html>
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=Skranji" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrapper" style="position:absolute; overflow:hidden;">
<div id="content" style="position:relative; white-space: nowrap; font-family: serif;">
<div id="innerWrapper" style="position:absolute; width:100%; height:100%; overflow:hidden;">
<div id="innerContent"></div>
</div>
some text whose size may change
</div>
</div>
<script type="text/javascript">
var wrapper = document.getElementById("wrapper"),
content = document.getElementById("content"),
innerWrapper = document.getElementById("innerWrapper"),
innerContent = document.getElementById("innerContent"),
origSize = {
width: content.offsetWidth,
height: content.offsetHeight
};
console.log("original content size: " + origSize.width + "x" + origSize.height);
// Resize wrapper and scroll its content to the bottom right corner
wrapper.style.width = (origSize.width - 1) + "px";
wrapper.style.height = (origSize.height - 1) + "px";
wrapper.scrollLeft = wrapper.scrollWidth - wrapper.clientWidth;
wrapper.scrollTop = wrapper.scrollHeight - wrapper.clientHeight;
// Resize inner content and scroll inner wrapper to the bottom right corner
innerContent.style.width = (origSize.width + 1) + "px";
innerContent.style.height = (origSize.height + 1) + "px";
innerWrapper.scrollLeft = innerWrapper.scrollWidth - innerWrapper.clientWidth;
innerWrapper.scrollTop = innerWrapper.scrollHeight - innerWrapper.clientHeight;
wrapper.addEventListener("scroll", function () {
console.log("wrapper scrolled, content size decreased: " + content.offsetWidth + "x" + content.offsetHeight);
}, false);
innerWrapper.addEventListener("scroll", function () {
console.log("innerWrapper scrolled, content size increased: " + content.offsetWidth + "x" + content.offsetHeight);
}, false);
console.log("setting new font family");
content.style.fontFamily = "Skranji, serif";
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment