I have been searching (unsuccessfully) for a reliable method to lazy load images while using the HTML5 spec for <picture>
. Most solutions/plugins out there currently rely on using data-
attributes. I could be wrong, but it doesn't seem this method will work in conjunction w/ <picture>
.
I'm really just looking to be pointed in the right direction. If anyone has a solution that they're currently using, I'd love to see. Thanks!
Here is standard markup per the HTML5 spec:
<picture width="500" height="500">
<source media="(min-width: 45em)" src="large.jpg">
<source media="(min-width: 18em)" src="med.jpg">
<source src="small.jpg">
<img src="small.jpg" alt="">
</picture>
See Question&Answers more detail:os