loading-attribute-polyfill
details-element-polyfill
loading-attribute-polyfill | details-element-polyfill | |
---|---|---|
4 | 1 | |
618 | 226 | |
0.3% | - | |
1.5 | 0.0 | |
20 days ago | over 1 year ago | |
JavaScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
loading-attribute-polyfill
- The best approach to lazy load images for maximum performance
-
Improving your web performance
If you want to know which browsers accept this new attribute you can check it out at CanIuse In case most of your users use a browser that doesn't have this attribute implemented yet you can always use a polyfill, I recommend this Polyfill
-
Native lazy-loading of images with zero Javascript
Browsers that do not support the loading attribute simply ignore it without any side-effects. Fortunately, there is a polyfill at Github available named loading-attribute-polyfill which can be used in those cases.
-
🔥 Native lazy loading is here!
I recommend using a polyfill in addition to this: https://github.com/mfranzke/loading-attribute-polyfill
details-element-polyfill
-
The details element
Finally, there is no support in Internet Explorer, which is becoming less and less of a problem every day. There is a polyfill, but I would simply let the content display completely. Unless it's absolutely necessary, sending more JavaScript to less capable browsers just for consistency's sake doesn't make much sense to me.
What are some alternatives?
QCObjects - Full Stack Javascript Framework for Modern Software Development
Sugar - A Javascript library for working with native objects.
vanilla-lazyload - LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.
core-js - Standard Library
sqip - "SQIP" (pronounced \skwɪb\ like the non-magical folk of magical descent) is a SVG-based LQIP technique.
rangeslider.js - 🎚 HTML5 input range slider element jQuery polyfill
ailog - An attendance log for Kizuna AIs' videos for when love-pii held the AI identity.
window.fetch polyfill - A window.fetch JavaScript polyfill.
zuix - zuix.js is a JavaScript library for creating component-based websites and applications.
history.js - History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without needing to use hashes anymore. For HTML4 browsers it will revert back to using the old onhashchange functionality.
Glide.js - A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more