-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlazy-img-example.html
65 lines (64 loc) · 4.22 KB
/
lazy-img-example.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
<!DOCTYPE html>
<html>
<head>
<title>Lazy Loading Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
</head>
<body>
<img loading="lazy" src="https://placekitten.com/400/400" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/401/401" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/402/402" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/403/403" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/404/404" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/405/405" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/406/406" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/407/407" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/408/408" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/409/409" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/410/410" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/411/411" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/412/412" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/413/413" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/414/414" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/415/415" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/415/415" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/420/420" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/421/421" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/422/422" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/423/423" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/424/424" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/425/425" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/426/426" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/427/427" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/428/429" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/430/430" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/431/431" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/432/432" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/433/433" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/434/434" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/435/435" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/436/436" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/437/437" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/438/438" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/439/439" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/440/440" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/441/441" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/442/442" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/443/443" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/444/444" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/445/445" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/446/446" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/447/447" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/448/448" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/449/449" width="320"alt="" />
<img loading="lazy" src="https://placekitten.com/450/450" width="320"alt="" />
<script>
if ('loading' in HTMLImageElement.prototype) {
console.log('Browser support `loading`...');
} else {
console.log('Not supported');
}
</script>
</body>
</html>