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!
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.
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.
链接地址: http://www.djcxy.com/p/61256.html上一篇: 在R中具有对数轴的散点图矩阵