-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
62 lines (58 loc) · 2.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Lazy load your images with the Intersection Observer API and a vanilla JS fallback.">
<meta name="keywords" content="javascript, Intersection Observer, lazy load, performance, plugin" />
<meta name="author" content="Nora Brown">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" />
<title>Lazy Loading With the Intersectio Observer API</title>
</head>
<body>
<div class="intro">
<h1>A Selection of Fungi</h1>
</div>
<p id="link-to-unlazy">Images not loading? Sorry about that. <a href="index-unlazy.html">Try this page instead.</a></p>
<figure>
<figcaption>A mushroom with purple gills</figcaption>
<img src="img/placeholder-v.png" class="unveil"
data-src="img/purple-gills-700.jpg"
data-srcset="img/purple-gills-1400.jpg 1400w, img/purple-gills-2800.jpg 2800w"
alt="A small mushroom with pink-purple, widly-spaced gills, lying on a green mossy background."
/>
</figure>
<figure>
<figcaption>The underside of a polypore, with bruising</figcaption>
<img src="img/placeholder-v.png" class="unveil"
data-src="img/polypore-525.jpg"
data-srcset="img/polypore-1050.jpg 1050w, img/polypore-2100.jpg 2100w"
alt="Densely-packed irregularly-shaped pores on the white underside of a shelf mushroom, with brown splotches."
/>
</figure>
<figure>
<figcaption>A group of puffball mushrooms</figcaption>
<img src="img/placeholder-sq.png" class="unveil"
data-src="img/puffballs-525.jpg"
data-srcset="img/puffballs-1050.jpg 1050w, img/puffballs-2100.jpg 2100w"
alt="A cluster of smooth, balloon-like, off-white puffball mushrooms growing on dead wood."
/>
</figure>
<figure>
<figcaption>A delicious black trumpet</figcaption>
<img src="img/placeholder-h.png" class="unveil"
data-src="img/black-trumpet-700.jpg"
data-srcset="img/black-trumpet-1400.jpg 1400w, img/black-trumpet-2800.jpg 2800w"
alt="Top view of a delicate light gray-brown, funnel-shaped mushroom amongst leaf litter on the forest floor."
/>
</figure>
<script src="unveil-intersect.js"></script>
<script>
document.getElementById('link-to-unlazy').remove();
window.unveil(200, function(){
// ... do stuff
})
</script>
</body>
</html>