Skip to content

Instantly share code, notes, and snippets.

@JMPerez

JMPerez/medium-skeleton-progressive-image-loading.html

Created March 5, 2017 19:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JMPerez/ffb70bbafb881581cf31f23e005b27a8 to your computer and use it in GitHub Desktop.
Save JMPerez/ffb70bbafb881581cf31f23e005b27a8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
medium-skeleton-progressive-image-loading.html
<figure>
<div>
<div/> <!-- this div keeps the aspect ratio so the placeholder doesn't collapse -->
<img/> <!-- this is a tiny image with a resolution of e.g. ~27x17 and low quality -->
<canvas/> <!-- takes the above image and applies a blur filter -->
<img/> <!-- the large image to be displayed -->
<noscript/> <!-- fallback for no JS -->
</div>
</figure>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment