Using a Mixin to Take the Math out of Responsive Font Sizes

IntersectionObserver has made lazy loading a lot easier and more efficient than it used to be, but to do it really right you still gotta remove the src and such, which is cumbersome. It’s definitely not as easy as:

Addy Osmani says it’s coming in Chrome 75:
The loading attribute allows a browser to defer loading offscreen images and iframes until users scroll near them. loading supports three values:
lazy: is a good candidate for lazy loading.
eager: is not a good candidate for lazy loading. Load right away.
auto: browser will determine whether or not to lazily load.
I’ll probably end up writing a WordPress content filter for this site that adds that attribute for every dang image on this site. Hallelujah, I say, and godspeed other browsers.
Easy lazy loading of images will have the biggest impact on the site as a whole, but lazy loaded iframes will be even bigger for the individual sites that use them. I’m into it.
Yes yes whatever native lazy loading of images but lazy loading of iframes is gonna be a goddamn game changer for ad tech: https://t.co/ADGc1UsVBf
— Laurie Voss (@seldo) April 8, 2019
I hope this pushes along the need for native aspect ratios as well, since a major reason for that is preventing content reflow from things loading later. We do have ways now, though.
If you’re looking to add lazy loading to your site’s media right now, you’d be smart to include these native lazy loading attributes, but as of this update (July 2019), support in stable browsers in non-existent still. You’ll want to look at doing more:
A Native Lazy Load for the Web
The Complete Guide to Lazy Loading Images
Tips for rolling your own lazy loading
Lozad.js: Performant Lazy Loading of Images
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.DesktopChromeFirefoxIEEdgeSafari7675No79NoMobile / TabletAndroid ChromeAndroid FirefoxAndroidiOS Safari84No81No