Lazy-loading/index.html at master · bipulbafna/Lazy-loading · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Lazy loading of images</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <h1>Lazy load images <small>(Using the intersection observer)</small></h1>
    </header>
    <main>
        <img class="lazy" data-src="https://api.adorable.io/avatars/1" data-description="Avatar1" />
        <img class="lazy" data-src="https://api.adorable.io/avatars/2" data-description="Avatar2" />
        <img class="lazy" data-src="https://api.adorable.io/avatars/3" data-description="Avatar3" />
        <img class="lazy" data-src="https://api.adorable.io/avatars/4" data-description="Avatar4" />
        <img class="lazy" data-src="https://api.adorable.io/avatars/5" data-description="Avatar5" />
        <img class="lazy" data-src="https://api.adorable.io/avatars/6" data-description="Avatar6" />
        <img class="lazy" data-src="https://api.adorable.io/avatars/7" data-description="Avatar7" />
        <img class="lazy" data-src="https://api.adorable.io/avatars/8" data-description="Avatar8" />
        <img class="lazy" data-src="https://api.adorable.io/avatars/9" data-description="Avatar9" />
        <img class="lazy" data-src="https://api.adorable.io/avatars/10" data-description="Avatar10" />
    </main>
    <script src="index.js"></script>
</body>

</html>