-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
65 lines (48 loc) · 3.5 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
<!doctype html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Lazyfill Demo</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta name="author" content="Lucifero Von Nachtosphere">
<meta name="description" content="A simple, experimental, solution to handle responsive images">
<link rel='stylesheet' href='demo/css/normalizer.css'>
<link rel='stylesheet' href='demo/css/main.css'>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-45962970-1', 'nobilelucifero.github.io');
ga('send', 'pageview');
</script>
<script src='lazyfill.js'></script>
</head>
<body>
<header class='header'>
<h1>Lazyfill</h1>
</header>
<article class="main">
<img class='js-lazyfill' src='' alt='' data-sources='{ "default": "demo/images/cutedeath.png", "small": "demo/images/cutedeath-small.png", "large": "demo/images/cutedeath-large.png" }' data-alt="Death says: Die!">
<p class='multi'>
Cookie carrot cake marzipan halvah marzipan candy candy sweet roll ice cream. Icing jelly-o jelly oat cake macaroon icing. Chocolate cake soufflé lollipop topping pie dragée fruitcake. Dessert fruitcake ice cream lollipop tiramisu toffee chupa chups tootsie roll jelly beans. Wafer marzipan cupcake lollipop pudding liquorice oat cake pie candy.
</p>
<p>
<img class='js-lazyfill' src='' alt="some text here" data-sources='{ "default": "demo/images/spookymask.png", "small": "demo/images/spookymask-closeup.png" }'>
Croissant gummi bears liquorice cupcake soufflé tiramisu cake pie jelly-o. Croissant pudding donut carrot cake marzipan gummies tootsie roll. Dragée apple pie tootsie roll pudding. Chocolate cake muffin chocolate cake gummies carrot cake. Jelly beans donut candy cake wafer dragée chocolate cake sesame snaps. Ice cream chupa chups cotton candy apple pie chocolate bonbon brownie. Halvah soufflé lollipop cheesecake macaroon. Tootsie roll cake brownie gummies. Tootsie roll croissant muffin muffin chocolate bar brownie fruitcake biscuit. Caramels jelly-o dragée tiramisu gummi bears cheesecake soufflé pastry. Apple pie wafer sesame snaps jelly chocolate bar liquorice. Danish brownie pudding jelly halvah macaroon macaroon cake sesame snaps.
</p>
<p>
It still works if you provide just the default media
</p>
<img class='js-lazyfill' src='' alt='' data-sources='{ "default": "demo/images/cutedeath.png" }' data-alt='Death says: Booored!'>
<p>
Dessert fruitcake ice cream lollipop tiramisu toffee chupa chups tootsie roll jelly beans. Wafer marzipan cupcake lollipop pudding liquorice oat cake pie candy.
Cookie carrot cake marzipan halvah marzipan candy candy sweet roll ice cream. Icing jelly-o jelly oat cake macaroon icing. Chocolate cake soufflé lollipop topping pie dragée fruitcake.
</p>
<!-- <p>A project by <a href="https://plus.google.com/107797914019344539644?rel=author">Lucifero Von Nachtosphere</a></p> -->
</article>
<footer class='footer'>
<a href='https://github.com/nobilelucifero/Lazyfill'>View on Github →</a>
</footer>
</body>
</html>