Sha256: 353b2fcbeb0f7daba96a170d29d69b65655f7af8f530d04942daabd40b82a6aa
Contents?: true
Size: 1.57 KB
Versions: 91
Compression:
Stored size: 1.57 KB
Contents
<!doctype html> <html> <head> <link href="/basic.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="/webfont.js"></script> <script type="text/javascript"> WebFont.load({ google: { families: ['Droid Sans'], api: '/fonts/api' }, /* * Style the document while fonts are loading. */ loading: function() { // The <body> doesn't exist yet, so wait a moment. setTimeout(function() { document.body.style.color = '#999'; }, 10); }, /* * When fonts are rendered, hide the loading message, show the * content, and change the style of the document. */ active: function() { var loadingMessage = document.getElementById('loading-message'); var content = document.getElementById('content'); loadingMessage.style.display = 'none'; content.style.display = 'block'; document.body.style.color = '#000'; } }); </script> <style type="text/css"> h1 { font-family: 'Droid Sans'; } </style> </head> <body> <h1 id="loading-message"> I'm loading! </h1> <h1 id="content" style="display:none;"> Hello World. I am Droid Sans. </h1> <hr> <p> <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> | <a href="/event-js-loading.html">Reload Cached</a> </p> <p> The goal of this page is to use JavaScript to manipulate the DOM while fonts are loading, and once they have all rendered. </p> </body> </html>
Version data entries
91 entries across 91 versions & 1 rubygems