How to avoid blinking when updating page from ajax

Question

I've got a table with a header, a row with input fields, rows with data. Like this. http://brow.hu/sitegen/stackoverflow_table_example.png

If somebody enters something into an input field I want to filter the data with an ajax query. After receiving the new table I change the content of the old one: div.innerHTML = req.responseText; and it blinks. How to avoid that?

The image link is now dead, making the question unclear. – Brian Tompsett - 汤莱恩 Sep 14 '16 at 10:21 — Brian Tompsett - 汤莱恩, Sep 14 '16 at 10:21

Alan Hensel · Accepted Answer · 2008-10-12T23:08:32.783

8

One way to avoid flicker is called double-buffering. In Ajax, this can be done simply with 2 divs occupying the same space, one of them with the style 'display: none', the other 'display: inline'. Always write to the invisible one, and then swap display styles. If the divs have absolute positioning and size, there is absolutely no chance for flicker, and even if they don't, you can hardly do better.

edited Oct 12 '08 at 23:08

answered Oct 12 '08 at 22:58

Alan Hensel

823
7
15

score 3 · Answer 2 · answered Oct 12 '08 at 22:40

3

It blinks because you're completely replacing the table ... if you add rows to or delete rows from the existing table and then load your AJAX data into the resulting table it won't blink.

answered Oct 12 '08 at 22:40

Steve Moyer

5,663
1
24
34

probably this is a good answer too, but the other one by Alan Hensel is simpler :) thx, though – Zoltan Lengyel Oct 13 '08 at 01:21

How to avoid blinking when updating page from ajax

2 Answers2

Linked