Today, Rick Viscomi noted that some sites have set eagle – instead of eager – as the value for Native Image Lazy-Loading:
Native image lazy loading landed months ago in Chrome 76. You can set img[loading] to auto, lazy, or eager.
According to @HTTPArchive, 34 websites are setting it to loading="eagle"
🤔
There's a Lord of the Rings joke in here somewhere… pic.twitter.com/SScZODozyQ
— Rick Viscomi (@rick_viscomi) July 30, 2020
While this is most likely a classic case of #damnyouautocorrect (instead of jokingly being a LOTR/Scrubs reference), that didn’t keep Jay Phelps from creating loading-attribute-eagle-polyfill to cater for those small mishaps:
I've released a polyfill for the new <img loading="eagle"> attributehttps://t.co/U0aMUVYtob
— Jay Phelps (@_jayphelps) July 30, 2020
A polyfill for
<img loading="eagle" />. Displays an America Eagle as the placeholder of the image while the your real images are still loading.
LOL 😁 — I love the internet.
Here’s a code example on how to use, if you ever were to use it in the first place:
<head>
<script src="https://unpkg.com/loading-attribute-eagle-polyfill/loading-attribute-eagle-polyfill.js"></script>
</head>
<body>
<!-- Here's an example URL that artificially delays the src so you can see the proud Eagle -->
<img
loading="eagle"
src="https://deelay.me/2000/https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg"
width="300"
height="200"
/>
</body>loading-attribute-eagle-polyfill →
ℹ️ Remember Native Image Lazy Loading being way too eager? Chrome recently updated the thresholds and are backporting the changes back to Chrome version 79:
We’ve improved <img> lazy-loading in Chrome! https://t.co/zx8sf7I86L The new thresholds for when we load <img loading=lazy>:
* Offer *much* better data-savings
* Are closer to JavaScript lazy-loading libraries
* Are rolling out to Chrome 79+ pic.twitter.com/3OHm2rnRAm— Addy Osmani (@addyosmani) July 17, 2020