Skip to content

Instantly share code, notes, and snippets.

@Weiyuan-Lane

Weiyuan-Lane/progressive_plus_lazy_load_image.html

Created February 3, 2019 06:13
Show Gist options
  • Save Weiyuan-Lane/48f7d5903abcdc0badd9a6ff4a864d31 to your computer and use it in GitHub Desktop.
Save Weiyuan-Lane/48f7d5903abcdc0badd9a6ff4a864d31 to your computer and use it in GitHub Desktop.
Download ZIP
Showcase progressive loading + lazyloading of images
Raw
progressive_plus_lazy_load_image.html
<html>
<head></head>
<body>
<!-- Using the lazysizes library, we can define a low
res image to load, and asynchronously load
a image appropriate to the user's screen size -->
<img
class="lazyload"
src="low_res.jpg"
data-src="low_res.jpg"
data-srcset="small_high_res.jpg 300w,
mid_high_res.jpg 600w,
big_high_res.jpg 900w" />
<!-- This content is below the fold, and does not load the
appropriate image until it is in view -->
<img
class="lazyload below-the-fold"
src="low_res.jpg"
data-src="low_res.jpg"
data-srcset="small_high_res.jpg 300w,
mid_high_res.jpg 600w,
big_high_res.jpg 900w" />
<!-- See usage @ https://github.com/aFarkas/lazysizes -->
<script src="lazysizes.min.js" async=""></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment