Show HN: In-view.js – Get notified when DOM elements enter or exit the viewport • Hacker News Board

Re: Show HN: In-view.js – Get notified when DOM elements enter or exit the viewport

#51

Post by JasonSage » Sat, Aug 27, 2016, 9:23 PM UTC

JasonSage wrote: post #50

jonahx wrote: post #22

Earlier quoted context omitted.

This looks nice. Is it as battle-tested as browserify?

tl;dr—don't use rollup with large untested dependencies I've had projects that got really strange error messages when using rollup that completely went away when I switched back to Babel. One "issue" with rollup is that it is not 100% semantically correct. Neither is Babel in all cases, but the creator argues that if you're not following exact semantics now, you're relying on your tests to ensure proper behavior, so…

I should clarify on my above comment, in rollup the semantics don't matter as much but if you're using Bublé instead of Babel, the semantics may very well come into play. In either case, I didn't have luck on a project until I moved fully to webpack+Babel.

Re: Show HN: In-view.js – Get notified when DOM elements enter or exit the viewport

#52

Post by wldlyinaccurate » Sat, Aug 27, 2016, 9:33 PM UTC

I know that this type of functionality is useful, but please consider the performance implications before doing anything like this. Non-native implementations (i.e. not IntersectionObserver) _always_ use properties and methods that cause style and layout calculations which have a significant performance impact on low-powered devices.

A more comprehensive list is here[1], but the main culprits are HTMLElement.offset{Width,Height}, Element.client{Width,Height}, and Window.getComputedStyle(). Avoid these, _especially_ on events like scroll. You will ruin the experience for many of your users.

[1] https://gist.github.com/paulirish/5d52fb081b3570c81e3a

Re: Show HN: In-view.js – Get notified when DOM elements enter or exit the viewport

#53

Post by jayflux » Sat, Aug 27, 2016, 10:02 PM UTC

iamleppert wrote: post #46

Whenever you attach an event handler on scroll, it can impact page performance because the javascript needs to be evaluated before the scroll event can continue AFAIK...going from some old Paul Irish talk on performance. The #1 killer he found responsible for "jankiness" (that horrible scroll feeling where the page scroll is unresponsive and not 60 fps smooth) is by people attaching event handlers on the scroll event…

"Whenever you attach an event handler on scroll, it can impact page performance because the javascript needs to be evaluated before the scroll event can continue AFAIK...going from some old Paul Irish talk on performance."

This isn't true no. Scrolling is an asynchronous event, in this case meaning it will happen regardless (without waiting on any JS event handlers), the JS event triggers after its happened. This is the reason you can't prevent scrolling from javascript.

Unlike clicking links, or submitting a form, the browser doesn't wait for any JS event handlers to return before doing this action. This was conscious decision to stop scrolling becoming too heavy or slow, or worse...crashing the page.

Re: Show HN: In-view.js – Get notified when DOM elements enter or exit the viewport

#54

Post by spython » Sat, Aug 27, 2016, 11:21 PM UTC

afandian wrote: post #2

I hope this gets used for good, not evil. Lots of sites (you know, those sites, they crop on on HN from time to time) flash up "give me your email address so I can send you spam" boxes before I can read the blog post. Or when it thinks I've gone somewhere else when in fact I just opened it in a new tab. Or if a momentarily switched away. I mostly close blogs that aggressively try to sell me things, but sometimes I wa…

I am using this technique to lazy load and unload videos on my site[1]. Since there are many videos that autoplay on scroll, some mechanism is needed to stop loading a video that has been scrolled over.

I am using onScreen which I found more efficient than alternative solutions.

[1] http://rybakov.com/blog/

[2] https://github.com/silvestreh/onScreen

Re: Show HN: In-view.js – Get notified when DOM elements enter or exit the viewport

#55

Post by freditup » Sun, Aug 28, 2016, 12:02 AM UTC

Heqx wrote: post #38

yagami_san wrote: post #34

Earlier quoted context omitted.

Just use https://www.npmjs.com/package/lodash.throttle

Can you point me to an explanation of the differences between the 'lodash.throttle' module and importing 'lodash/throttle'?

You should get about the same results using a bundler. Perhaps the lodash.throttle package is for reducing `npm install` time or reducing bloat if you check in your node modules?

Re: Show HN: In-view.js – Get notified when DOM elements enter or exit the viewport

#56

Post by Heqx » Sun, Aug 28, 2016, 12:52 AM UTC

spankalee wrote: post #43

Heqx wrote: post #29

Earlier quoted context omitted.

I hear you. But, isn't this just an editor's draft spec? Only Chrome and Android have done any implementation at all. So, as far as I can tell, there's a chance this will never be fully implemented? And, because it's a draft, the spec could change significantly. Is that right?

A spec being draft seems like an odd reason to ignore it and do a completely different API. Intersection Observer has been implemented in Chrome since 51, and Opera since 38. It's currently being implemented in Firefox ( https://bugzilla.mozilla.org/show_bug.cgi?id=1243846 ), and is "likely" from Edge ( https://developer.microsoft.com/en-us/microsoft-edge/platfor... ). in-view.js's API is certainly less likely to be…

I was sincerely asking all of those questions. I'm not very familiar with the process these specs go through to reach adoption.

Re: Show HN: In-view.js – Get notified when DOM elements enter or exit the viewport

#57

Post by obihill » Sun, Aug 28, 2016, 1:59 AM UTC

Definitely a problem that needs solving, but we run the risk of implementing too many 'bite-size' libraries with code that could probably serve better as helper extensions to already existing toolkits e.g. jQuery, underscore, etc.

Re: Show HN: In-view.js – Get notified when DOM elements enter or exit the viewport

#58

Post by gcb0 » Sun, Aug 28, 2016, 3:23 AM UTC

wldlyinaccurate wrote: post #52

I know that this type of functionality is useful, but please consider the performance implications before doing anything like this. Non-native implementations (i.e. not IntersectionObserver) _always_ use properties and methods that cause style and layout calculations which have a significant performance impact on low-powered devices. A more comprehensive list is here[1], but the main culprits are HTMLElement.offset{W…

and it's impossible to achieve it without probing those attributes.

some advertising libraries solve that, since the advertising industry deals in in-view ad impressions for a few years now, by being smart about when to do it. the best one is called safeFrames. others like moat detect if the user has a fast computer, abuse it to no end, and then extrapolate the results for the whole audience.

i expect all of them to move to the native APIs soon (but Android fragmentation will make it slow)

Re: Show HN: In-view.js – Get notified when DOM elements enter or exit the viewport

#59

Post by [deleted] » Sun, Aug 28, 2016, 4:44 AM UTC

jayflux wrote: post #53

iamleppert wrote: post #46

Whenever you attach an event handler on scroll, it can impact page performance because the javascript needs to be evaluated before the scroll event can continue AFAIK...going from some old Paul Irish talk on performance. The #1 killer he found responsible for "jankiness" (that horrible scroll feeling where the page scroll is unresponsive and not 60 fps smooth) is by people attaching event handlers on the scroll event…

"Whenever you attach an event handler on scroll, it can impact page performance because the javascript needs to be evaluated before the scroll event can continue AFAIK...going from some old Paul Irish talk on performance." This isn't true no. Scrolling is an asynchronous event, in this case meaning it will happen regardless (without waiting on any JS event handlers), the JS event triggers after its happened. This is…

[deleted]

Re: Show HN: In-view.js – Get notified when DOM elements enter or exit the viewport

#60

Post by grumblestumble » Sun, Aug 28, 2016, 5:29 AM UTC

cdata wrote: post #16

There is an emerging standard called Intersection Observer that addresses the same use case: https://github.com/WICG/IntersectionObserver/blob/gh-pages/e... This is a really useful problem to solve. But, I would personally prefer to solve it with a polyfill for a standardized approach that will eventually receive native implementation.

Came here to say this. Recently spent a day hand-rolling my own, much like the author here has, only to rip it out at the end of the day and replace it with a lightweight wrapper around IntersectionObserver, using the polyfill. The API is just great, really well-thought out and much better than what I had come up with. The only downside is that I'd gone to some pain to get everything working with RAF, and the polyfill doesn't bother with that.