moonwave99
commented
9 years ago For the record, couldn't you just add Unveil handlers just to the deferred html every time? Something like:
$(htmlToBeInjected).find('img').unveil()Open mglinski opened 9 years ago
moonwave99
commented
9 years ago For the record, couldn't you just add Unveil handlers just to the deferred html every time? Something like:
$(htmlToBeInjected).find('img').unveil()
So I implemented Unveil.js on a project I am contributing to and during that process I encountered and solved a few issues with how we had the site setup and Unveil.JS works.
The main issue is this: Unveil.js will run the scroll-show math on the same image however many times the unveil() function is called on them.
In a page that has a lot of dynamic data, where you want to lazy-load ajax html or images behind tabs, this results in lots and lots of potential calls to unveil(), which then runs the filter event for all images that have not loaded yet, every time the page scrolls or is resized.
On a page with 400+ smaller images for example, and 2-3 tabs to look through, this can easily lead to 10+ sets of unveil() events on every image on the page, turning the user experience into a stuttering mess when trying to scroll.
I fixed this by implementing a :not(.class-name) on my $('img') selector, and then had unveil.js add that class to each image in the initial jquery selectors result set. This solved my problem, but a more elegant solution should be looked into for the main library.
Please let me know if you need code samples or if I need to explain anything more.