Comments (3)
WebKit is working on it. https://bugs.webkit.org/show_bug.cgi?id=196698
from yall.js.
Thanks for this, @panablue.
At current, my strategy is no fallback. I considered writing a new version of yall to try and dovetail with native lazy loading, but the more I think it over, the more I'm convinced that one of two strategies should be adopted:
- If one wants full coverage across browsers for native lazy loading, then using a JavaScript-based solution (yall or otherwise) in the documented fashion might be preferable to juggling both it and native lazy loading.
- If one wants native lazy loading, progressive enhancement is preferable. Browsers that can support it will use it, those that don't, won't.
Native lazy loading is currently supported for images and iframes in nearly 63% of browsers at the time of this writing. As Edge creeps forward with adoption of Chromium, and Firefox appears to show interest in implementation, I'm less inclined to believe we should be pressing forward with userland solutions like this. I believe they ultimately hold the platform back, and introduce unnecessary complexity in applications in the presence of a simpler, more robust platform-provided solution.
from yall.js.
@malchata Just going with one or the other certainly keeps it simple. Depending on the region and site-specific audience (prevalence of iOS, etc) I suppose sticking with a JS solution for now probably covers the most users.
If it's useful to anyone, this is a simple snippet I put together for a recent project that didn't need support for srcset
or CSS background images. It removes the data-
prefix in browsers that support native loading="lazy"
or dont' support IntersectionObserver
(very old browsers) and falls back to IntersectionObserver
for everything in between:
var lazyimages=document.querySelectorAll("img[data-src]"); if("IntersectionObserver"in window&&!("loading"in HTMLImageElement.prototype)){var imageObserver=new IntersectionObserver(function(entries,observer){entries.forEach(function(entry){if(entry.isIntersecting){var image=entry.target; image.src=image.dataset.src; image.removeAttribute("data-src"); imageObserver.unobserve(image)}})},{rootMargin:"500px 0px"}); lazyimages.forEach(function(image){imageObserver.observe(image)})}else{for(var i=0; i<lazyimages.length; i++){lazyimages[i].src=lazyimages[i].dataset.src; lazyimages[i].removeAttribute("data-src")}}
Used with HTML like:
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20IMAGEWIDTHGOESHERE%20IMAGEHEIGHTGOESHERE'%3E%3C/svg%3E" data-src="REALIMAGEPATHGOESHERE" width="IMAGEWIDTHGOESHERE" height="IMAGEHEIGHTGOESHERE" alt="ALTTEXTGOESHERE" loading="lazy">
from yall.js.
Related Issues (20)
- 2.3.2 not working with IE11
- Missing files in the 3.1.5 npm install HOT 6
- yall doesn't seem to work on iOS HOT 3
- Google Page Speed still asking to defer offscreen images HOT 5
- Broken loop in yallApplyFn
- Images in slideshow not loading correctly in Safari
- Strange error in the latest 3.1.6 version HOT 2
- 3.1.7 issue in IE11 (with polyfill) HOT 3
- Would you add extensions/libraries facilitating usage of this library? HOT 1
- Lazy loading <video> (autoplay/GIF-like behavior) HOT 1
- Picture element has its image loaded before the users scrolls to it. HOT 2
- Width / Height for <img> in test files
- how to disable on particular page
- Type error when dataset is undefined.
- Usage with Webpack & Babel, for supporting IE11 / not ES6 browsers? HOT 8
- Yall not working on modal window iframe. HOT 1
- Yall with background image css with loop
- Can't find this file ./dist/yall.mjs
- [Feature Request] Detect when video is no longer on screen and provide hook
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from yall.js.