anchor-js
Version:
A Javscript utility for adding deep anchor links to online docs.
97 lines (87 loc) • 12 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AnchorJS Example</title>
<style>
.main {
font-family: Georgia, serif;
font-size: 1.4em;
margin: 80px auto;
width: 600px;
}
img {
max-width: 100%;
}
p {
font-size: 16px;
}
.page-title {
font-size: 2em;
text-align: center;
}
.anchorjs-logo {
background-image: url(data:image/png;base64,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);
background-position: center center;
margin: 20px auto;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<section class="main">
<h1>A page with large images (delays after DOMContentLoaded).</h1>
<img src="http://lorempixel.com/1600/1600/" alt="Large image">
<h2 class="load-order-1">Before </body></h2>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<h2 class="load-order-2">On DOMContentLoaded</h2>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<h2 class="load-order-3">On $(document).ready()</h2>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<h2 class="load-order-4">On window.onload</h2>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<h2 class="load-order-5">On arbitrary setTimeout</h2>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</section>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../anchor.js"></script>
<script>
var Anchor1 = new AnchorJS(),
Anchor2,
Anchor3,
Anchor4,
Anchor5;
console.log('Added anchors before </body>: ' + performance.now());
Anchor1.add('.load-order-1');
document.addEventListener("DOMContentLoaded", function(event) {
console.log('Added anchors on DOMContentLoaded: ' + performance.now());
Anchor2 = new AnchorJS();
Anchor2.add('.load-order-2');
});
$(function() {
console.log('Added anchors on $(document).ready(): ' + performance.now());
Anchor3 = new AnchorJS();
Anchor3.add('.load-order-3');
});
$(document).ready(function() {
console.log('Other time for $(document).ready(): ' + performance.now());
});
window.onload = function() {
console.log('Added anchors on window.onload: ' + performance.now());
Anchor4 = new AnchorJS();
Anchor4.add('.load-order-4');
};
setTimeout(function() {
console.log('Added anchors after a 2 second setTimeout: ' + performance.now());
Anchor5 = new AnchorJS();
Anchor5.add('.load-order-5');
}, 2000);
</script>
</body>
</html>