Comments (10)
Hello @FlorianWerndl,
thanks for sharing your idea. I'm open for all new ideas!
But actually I'm not sure what you mean. What do you have in mind? Could you create an simple example how you suppose to use this feature?
Thanks!
from jquery.lazy.
Something like this: https://github.com/customd/jquery-visible
Or could be an event which gives you all the elements within the viewport right now.
You could react on the status of the element.
Do you know what I mean?
from jquery.lazy.
If I understand you correctly, you want a way to overwrite the default visbile detection. I think a function
or an event
would be a bit much overhead wor this task. First idea I've got would be to use the elements data
. Possible like this:
someElements.data('visible', true);
lazyInstance.update(); // only needed if instant execution is wanted
from jquery.lazy.
I don't know if it is necessary to overwrite the default visible detection.
It would just be nice to know if a already loaded element is in the viewport
or not when the user scrolls the site.
from jquery.lazy.
Ok, now I'm not sure about the problem again. 😅
Where do you want to know it? Inside of callbacks
and custom loaders
you will know it, of course. So you're talking about an event
, what will be triggered
on an element, whenever Lazy
means, the element is in the defined viewport
? Well, that can be easily done by yourself.
Think about this:
var elements = $('selector');
elements.on('enteredLazyViewport', function() {
console.log('element is in the viewport now');
});
elements.lazy({
beforeLoad: function(element) {
element.trigger('enteredLazyViewport');
}
});
from jquery.lazy.
Yes, I got something like this.
But imagine something like this:
var elements = $('selector');
elements.on('isInLazyViewport', function() {
console.log('element is in the viewport at the moment!');
});
elements.on('isNotInLazyViewport', function() {
console.log('element is not in the viewport at the moment!');
});
elements.lazy({
isInViewport: function(element) {
element.trigger('isInLazyViewport');
},
isNotInViewport: function(element) {
element.trigger('isNotInLazyViewport');
}
});
And this changes while the user is scrolling the site.
from jquery.lazy.
Ahh, okay. The first isInLazyViewport
is not a problem, but isNotInLazyViewport
would be a bit complicated. Lazy
will drop the elements from the queue, once they are handled. This is a performance point. Otherwise it would have to check every element ever added over and over again. But on big lists, galleries or infinit scrolls it is faster to just remove the elements after handling to shrink the queue.
So without changing this whole behavior of the plugin, I don't see a implementation of this events. If you really need such events, I would think about copy that part, and implement it by yourself outside of the plugin. You can use the function out of the plugin easily:
// function copied out of Lazy plugin
function isInLoadableArea(element, direction, threshold) {
var elementBound = element.getBoundingClientRect(),
vertical = (($(window).height() + threshold) > elementBound.top) &&
(-threshold < elementBound.bottom),
horizontal = (($(window).width() + threshold) > elementBound.left) &&
(-threshold < elementBound.right);
if( direction == 'vertical' ) return vertical;
else if( direction == 'horizontal' ) return horizontal;
return vertical && horizontal;
}
And then just use it in any function or event:
// your elements with listeners
var elements = $('selector').on({
isInLazyViewport: function() {
console.log('element is in the viewport at the moment');
},
isNotInLazyViewport: function() {
console.log('element is not the viewport at the moment');
}
});
// listen on scroll too to determine changed
$(window).scroll(function() {
// loop each and trigger what you want
elements.each(function() {
$(this).trigger(isInLoadableArea(this, 'vertical', 0) ? 'isInLazyViewport' : 'isNotInLazyViewport');
});
});
You could even get the configuration out of your Lazy instance, if you want it more dynamic:
var direction = lazyInstance.config('direction'),
threshold = lazyInstance.config('threshold');
from jquery.lazy.
Thanks!
I thought maybe lazy is doing this check anyway so I don't need to implement it again or use another library. I totally understand that you are dropping the elements once they are handled so you don't run into performance issues.
from jquery.lazy.
I'm sorry that I have no better answer. But I think that is such a special wish, that it's not worth the complete change of this.
from jquery.lazy.
No problem. Thank you for the quick response!
from jquery.lazy.
Related Issues (20)
- In Computer works like a charm. not working on mobile devices HOT 1
- Images downloading twice in Chrome HOT 2
- How to use jQuery.Lazy() Plugin with an image containing a cache-busting hash HOT 8
- Issue when using jQuery.Lazy() Plugin with a function AJAX call HOT 5
- images aren't shown if they doesn't come to visibility by scroll HOT 2
- images with srcset load all at once HOT 2
- Slow image load handling HOT 1
- Custom Content Loaders broken with jQuery 3.x HOT 4
- Doesn't trigger when new elements are toggled in HOT 2
- JS Error When Using on Cloned Template HOT 3
- laravel-mix, cannot reuse lazy HOT 1
- Deprecated
- Defer the lazy loading HOT 1
- Don`t change src when exists HOT 4
- Intermittent image load with AJAX return
- Custom loader using Ajax fails (not even fired), while lazyloading images work. HOT 1
- Bugs with gsap scrolltrigger in Safari HOT 3
- Throttling by number of calls HOT 1
- Images loading twice HOT 2
- Not able to get it working in FireFox 121.0.1 on Mac OS
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 jquery.lazy.