Comments (6)
If we can maintain current functionality, I'd be good with this change. My only reservation is that I'm totally not an expert on vdom stuff, so I'm not sure how the implementation for this would work. Do you have some thoughts on how we might achieve this? I'd be particularly interested in seeing a concrete example of how this might work with React/Preact.
from yall.js.
I'm not sure how the implementation for this would work.
there's nothing specific yall needs to do besides avoiding classList/className mutation (and by extension, relying on classes for anything except initial presence of lazy
to hook its observer magic).
If we can maintain current functionality, I'd be good with this change.
i'm pretty sure we can. i would probably opt to make this the default behavior unless you feel there's enough utility in keeping the lazyBackgroundLoaded
class (if this pans out there won't be a need for it in terms of book-keeping), but since you expose it in options, maybe you felt it was useful for other purposes.
Do you have some thoughts on how we might achieve this?
pretty sure i can implement this without too much headache.
from yall.js.
pretty sure i can implement this without too much headache.
Let's do it! As part of a PoC, I think it'd be good to show a demo of how this might work with React or Preact.
from yall.js.
it turns out that due to the way background images are loaded (exclusively relying on classList mutation), this is not going to be possible without making breaking changes (and requiring something like data-bg to be specified on the element, rather than in the css.)
i went a little overboard and wrote a refactored lib for myself based on yall that has quite a lot of breaking changes: https://github.com/leeoniya/notyet.
feel free to assimilate anything you find useful.
from yall.js.
Ah, bummer. To be honest though, I'd consider making yall.js a new minor version that would incorporate these changes. If the breaking changes are very significant, we could just do a major version bump, write some functionality for this lib to co-exist with native lazy loading, and then possibly consider development on this thing "complete". I'm getting to a point where I'd like to see this project stabilized, especially if native lazy loading sees broader support.
What do you think?
EDIT: I made you a collaborator on the repo. Way past time anyway, considering how helpful you've been on this project.
from yall.js.
write some functionality for this lib to co-exist with native lazy loading
https://css-tricks.com/native-lazy-loading/
hmm, maybe it makes sense to switch from querying .lazy
to [loading=lazy]
. and disable the lib if native lazy loading is supported (but how to check for it cheaply?). this would also alleviate class mutation concerns. of course the native impl only mentions iframes and images (not pictures). i'm extremely against adding more code to deal with interop of some far-into-the-future feature that's only half-useful in 50% of browsers.
What do you think?
it really depends on what you think of NotYet. the reason i didn't simply open 1000 PRs to yall.js is because i didn't want to discuss whether each PR was worth doing, if you liked it, etc; there are enough code formatting changes, tooling changes, api changes and docs changes that i would not be willing to throw away even 30% of my choices for the sake of backwards compat or to be co-maintainer of yall.js. my general demeanor is pretty self-serving in that if i can write/modify a tool myself, then i don't need to put up with an ounce of API awkwardness or features i'll never need.
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
- yall.js as a fallback for native loading="lazy" HOT 3
- 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.