CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-table
ihake
ihake

Reputation: 1831

Force javascript to run *before* browser redraw (jsFiddle example)

I am building a little web based application using an HTML table. One unusual property of this table is that it has fixed top row and left column (similar to excel). I accomplished this using a little jQuery and CSS.

The problem is, the jQuery event that triggers my code is the $(window).scroll event, and evidently most browsers (Chrome and IE) redraw the page before the code that is called by this event is finished running. As a result, the left column and top row take a split second to "catch up" to the rest of the table.

I've provided a stripped down jsFiddle example in order to show you my problem. Note: The lag isn't very noticeable when the table is so small and (relatively speaking) empty of content. Nevertheless, it is there (assuming you aren't using firefox). Is there any way to get rid of this lag?

Thanks!

Upvotes: 7

Views: 836

Answers (2)

mbarkhau
mbarkhau

Reputation: 8469

I didn't get this to work with either the scroll event or with requestAnimationFrame. What I ended up doing is attaching to the mousewheel event, which fires before scrolling and rendering has happend. If the scroll event is going downward, I can apply the appropriate class in time for rendering.

Upvotes: 2

Daniel Baulig
Daniel Baulig

Reputation: 10989

Just an idea, but maybe worth considering: You could try using requestAnimationFrame as described in this article (or in a similar way). That might smooth out the update/"lag" issues.

Upvotes: 2

Related Questions