3

I have a very busy UI, a lot of constant updating without interaction (imagine a long stock quote list or portfolio) of the DOM and I am starting to see it slow down especially in IE. It really shows the differences in the JavaScript engines. While I am trying really hard to follow all the best practices with jQuery selectors, DOM manipulation, and other, I think I can do more.

I would like to only update the parts of the UI that are visible. So somehow I would like to only update the DOM elements that are within the user's viewport and when user scrolls, only until the scrolling stops do Ii want to perform the updates to the viewable DOM elements.

This is similar to the method that is uses when there are lots of images on a page, and only when the images are scrolled into view are they loaded. This sounds like a complex goal, but was curious if it's been done before. I am not even sure it's possible.

Abbas
  • 6,720
  • 4
  • 35
  • 49
ijjo
  • 525
  • 9
  • 22
  • You can use jquery visible selector http://api.jquery.com/visible-selector/ – Dominic Green Dec 28 '11 at 20:43
  • dont think thats what i need. thats just visible (not hidden). i need something like "give me all elements with this class that are within the user's viewport. – ijjo Dec 28 '11 at 21:08

2 Answers2

2

Here is another question that is fairly similar...

Check if element is visible after scrolling

Hope this helps.

Community
  • 1
  • 1
phil
  • 3,538
  • 2
  • 24
  • 24
2

Yeah definitely possible. You'll want to use an onScroll event listener in conjunction with a method that walks the DOM and quickly dismisses any elements that aren't in the viewport. There are multiple ways to check if a DOM is in view. One of the best I've come across is detailed in this answer:

Check if element is visible after scrolling

Community
  • 1
  • 1
mattacular
  • 1,849
  • 13
  • 17