Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript Lazyload image with noscript fallback
<figure class="wp-block-image size-medium">
<img width="300" height="200" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%201280'%3E%3C/svg%3E" sizes="(max-width: 300px) 100vw, 300px" srcset="https://example.com/wp-content/uploads/2021/04/sample-300x200.jpg 300w, https://example.com/wp-content/uploads/2021/04/sample-768x512.jpg 768w, https://example.com/wp-content/uploads/2021/04/sample-1024x683.jpg 1024w, https://example.com/wp-content/uploads/2021/04/sample-1536x1024.jpg 1536w, https://example.com/wp-content/uploads/2021/04/sample-20x13.jpg 20w, https://example.com/wp-content/uploads/2021/04/sample.jpg 1920w" data-ll-status="loaded">
<noscript><img width="300" height="200" src="https://example.com/wp-content/uploads/2021/04/sample-300x200.jpg" alt="" class="wp-image-265" srcset="https://example.com/wp-content/uploads/2021/04/sample-300x200.jpg 300w, https://example.com/wp-content/uploads/2021/04/sample-768x512.jpg 768w, https://example.com/wp-content/uploads/2021/04/sample-1024x683.jpg 1024w, https://example.com/wp-content/uploads/2021/04/sample-1536x1024.jpg 1536w, https://example.com/wp-content/uploads/2021/04/sample-20x13.jpg 20w, https://example.com/wp-content/uploads/2021/04/sample.jpg 1920w" sizes="(max-width: 300px) 100vw, 300px" /></noscript>
</figure>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment