Skip to content

Instantly share code, notes, and snippets.

@alexcarpenter

alexcarpenter/lazyloading.html

Last active December 8, 2017 13:52
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexcarpenter/2f818c966f1a09c65656ea9594b70da7 to your computer and use it in GitHub Desktop.
Save alexcarpenter/2f818c966f1a09c65656ea9594b70da7 to your computer and use it in GitHub Desktop.
Download ZIP
How to lazyload images using lazysizes
Raw
lazyloading.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lazy loading images</title>
<style>
body {
max-width: 900px;
margin: auto;
padding: 100px;
}
img {
max-width: 100%;
}
.ratio {
margin-bottom: 100px;
position: relative;
display: block;
}
.ratio:before {
content: '';
display: block;
width: 100%;
padding-bottom: calc((9/16) * 100%);
}
.ratio__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="ratio"><img class="ratio__content lazyload" data-src="https://picsum.photos/1600/900?image=1"></div>
<div class="ratio"><img class="ratio__content lazyload" data-src="https://picsum.photos/1600/900?image=2"></div>
<div class="ratio"><img class="ratio__content lazyload" data-src="https://picsum.photos/1600/900?image=3"></div>
<div class="ratio"><img class="ratio__content lazyload" data-src="https://picsum.photos/1600/900?image=4"></div>
<div class="ratio"><img class="ratio__content lazyload" data-src="https://picsum.photos/1600/900?image=5"></div>
<div class="ratio"><img class="ratio__content lazyload" data-src="https://picsum.photos/1600/900?image=6"></div>
<div class="ratio"><img class="ratio__content lazyload" data-src="https://picsum.photos/1600/900?image=7"></div>
<div class="ratio"><img class="ratio__content lazyload" data-src="https://picsum.photos/1600/900?image=8"></div>
<div class="ratio"><img class="ratio__content lazyload" data-src="https://picsum.photos/1600/900?image=9"></div>
<div class="ratio"><img class="ratio__content lazyload" data-src="https://picsum.photos/1600/900?image=10"></div>
<script src="https://unpkg.com/lazysizes@4.0.1/lazysizes.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment