-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
78 lines (78 loc) · 10.3 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lazy Image Loading - Pure JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./normalize.css">
<link rel="stylesheet" type="text/css" media="screen" href="./main.css">
</head>
<body>
<div class="content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente dolore minus tenetur earum distinctio. Beatae harum asperiores quos maiores minima voluptas possimus quasi ipsam deleniti libero ducimus aliquid, quod neque?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. At modi repellat deleniti voluptatem quaerat illo. Dolorum numquam architecto, dolorem nam ut laborum earum quibusdam. Quo sunt distinctio numquam ipsam laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam dolorum repudiandae facere aliquid? Ducimus, itaque, omnis praesentium earum consequatur illo odio, ex obcaecati rerum perspiciatis enim minima quae reiciendis excepturi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem sunt in atque eaque repellendus ipsam laborum natus, a dolore quis ratione error dignissimos dolorum optio, aperiam suscipit saepe molestias rerum!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente dolore minus tenetur earum distinctio. Beatae harum asperiores quos maiores minima voluptas possimus quasi ipsam deleniti libero ducimus aliquid, quod neque?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. At modi repellat deleniti voluptatem quaerat illo. Dolorum numquam architecto, dolorem nam ut laborum earum quibusdam. Quo sunt distinctio numquam ipsam laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam dolorum repudiandae facere aliquid? Ducimus, itaque, omnis praesentium earum consequatur illo odio, ex obcaecati rerum perspiciatis enim minima quae reiciendis excepturi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem sunt in atque eaque repellendus ipsam laborum natus, a dolore quis ratione error dignissimos dolorum optio, aperiam suscipit saepe molestias rerum!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente dolore minus tenetur earum distinctio. Beatae harum asperiores quos maiores minima voluptas possimus quasi ipsam deleniti libero ducimus aliquid, quod neque?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. At modi repellat deleniti voluptatem quaerat illo. Dolorum numquam architecto, dolorem nam ut laborum earum quibusdam. Quo sunt distinctio numquam ipsam laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam dolorum repudiandae facere aliquid? Ducimus, itaque, omnis praesentium earum consequatur illo odio, ex obcaecati rerum perspiciatis enim minima quae reiciendis excepturi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem sunt in atque eaque repellendus ipsam laborum natus, a dolore quis ratione error dignissimos dolorum optio, aperiam suscipit saepe molestias rerum!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente dolore minus tenetur earum distinctio. Beatae harum asperiores quos maiores minima voluptas possimus quasi ipsam deleniti libero ducimus aliquid, quod neque?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. At modi repellat deleniti voluptatem quaerat illo. Dolorum numquam architecto, dolorem nam ut laborum earum quibusdam. Quo sunt distinctio numquam ipsam laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam dolorum repudiandae facere aliquid? Ducimus, itaque, omnis praesentium earum consequatur illo odio, ex obcaecati rerum perspiciatis enim minima quae reiciendis excepturi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem sunt in atque eaque repellendus ipsam laborum natus, a dolore quis ratione error dignissimos dolorum optio, aperiam suscipit saepe molestias rerum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam dolorum repudiandae facere aliquid? Ducimus, itaque, omnis praesentium earum consequatur illo odio, ex obcaecati rerum perspiciatis enim minima quae reiciendis excepturi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem sunt in atque eaque repellendus ipsam laborum natus, a dolore quis ratione error dignissimos dolorum optio, aperiam suscipit saepe molestias rerum!
<figure>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
width="500px" height="500px" alt="birds-cold-conifer"
data-src="./assets/image/birds-cold-conifer.jpg"
/>
<figcaption>CREDIT: https://images.pexels.com/</figcaption>
</figure>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur numquam qui aspernatur, totam dolores molestiae alias consectetur voluptate tempora, magni, deleniti blanditiis cupiditate! Quod voluptas repellendus unde assumenda earum sint.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente cumque consequuntur nemo iusto autem quod deserunt accusantium laudantium quos aut magni, mollitia illum ut, assumenda nobis quibusdam! Ducimus, iure ad.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam dolorum repudiandae facere aliquid? Ducimus, itaque, omnis praesentium earum consequatur illo odio, ex obcaecati rerum perspiciatis enim minima quae reiciendis excepturi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem sunt in atque eaque repellendus ipsam laborum natus, a dolore quis ratione error dignissimos dolorum optio, aperiam suscipit saepe molestias rerum!
<figure>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
width="500px" height="500px" alt="forest-haze"
data-src="./assets/image/forest-haze.jpg"
/>
<figcaption>CREDIT: https://images.pexels.com/</figcaption>
</figure>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente dolore minus tenetur earum distinctio. Beatae harum asperiores quos maiores minima voluptas possimus quasi ipsam deleniti libero ducimus aliquid, quod neque?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. At modi repellat deleniti voluptatem quaerat illo. Dolorum numquam architecto, dolorem nam ut laborum earum quibusdam. Quo sunt distinctio numquam ipsam laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam dolorum repudiandae facere aliquid? Ducimus, itaque, omnis praesentium earum consequatur illo odio, ex obcaecati rerum perspiciatis enim minima quae reiciendis excepturi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem sunt in atque eaque repellendus ipsam laborum natus, a dolore quis ratione error dignissimos dolorum optio, aperiam suscipit saepe molestias rerum!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente dolore minus tenetur earum distinctio. Beatae harum asperiores quos maiores minima voluptas possimus quasi ipsam deleniti libero ducimus aliquid, quod neque?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. At modi repellat deleniti voluptatem quaerat illo. Dolorum numquam architecto, dolorem nam ut laborum earum quibusdam. Quo sunt distinctio numquam ipsam laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam dolorum repudiandae facere aliquid? Ducimus, itaque, omnis praesentium earum consequatur illo odio, ex obcaecati rerum perspiciatis enim minima quae reiciendis excepturi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem sunt in atque eaque repellendus ipsam laborum natus, a dolore quis ratione error dignissimos dolorum optio, aperiam suscipit saepe molestias rerum!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente dolore minus tenetur earum distinctio. Beatae harum asperiores quos maiores minima voluptas possimus quasi ipsam deleniti libero ducimus aliquid, quod neque?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. At modi repellat deleniti voluptatem quaerat illo. Dolorum numquam architecto, dolorem nam ut laborum earum quibusdam. Quo sunt distinctio numquam ipsam laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam dolorum repudiandae facere aliquid? Ducimus, itaque, omnis praesentium earum consequatur illo odio, ex obcaecati rerum perspiciatis enim minima quae reiciendis excepturi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem sunt in atque eaque repellendus ipsam laborum natus, a dolore quis ratione error dignissimos dolorum optio, aperiam suscipit saepe molestias rerum!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente dolore minus tenetur earum distinctio. Beatae harum asperiores quos maiores minima voluptas possimus quasi ipsam deleniti libero ducimus aliquid, quod neque?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. At modi repellat deleniti voluptatem quaerat illo. Dolorum numquam architecto, dolorem nam ut laborum earum quibusdam. Quo sunt distinctio numquam ipsam laboriosam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam dolorum repudiandae facere aliquid? Ducimus, itaque, omnis praesentium earum consequatur illo odio, ex obcaecati rerum perspiciatis enim minima quae reiciendis excepturi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem sunt in atque eaque repellendus ipsam laborum natus, a dolore quis ratione error dignissimos dolorum optio, aperiam suscipit saepe molestias rerum!
<figure>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
width="500px" height="500px" alt="agricultural-cropland"
data-src="./assets/image/agricultural-cropland.jpg"
/>
<figcaption>CREDIT: https://images.pexels.com/</figcaption>
</figure>
</div>
<script src="./main.js" ></script>
<script>
lazyLoadImg.init();
</script>
</body>
</html>