Comment éviter de clignoter lors de la mise à jour de la page d'ajax

Question

J'ai une table avec un en-tête, une ligne avec des champs de saisie, des lignes avec des données. Like this. http://brow.hu/sitegen/stackoverflow_table_example.png

Si quelqu'un entre quelque chose dans un champ de saisie, je veux filtrer les données avec une requête ajax. Après avoir reçu la nouvelle table je change le contenu de l'ancien: div.innerHTML = req.responseText; et il clignote. Comment éviter cela?

Answer 1

Une façon d'éviter le scintillement est appelée double tampon. En Ajax, cela peut se faire simplement avec 2 divs occupant le même espace, l'un avec le style 'display: none', l'autre 'display: inline'. Toujours écrire à l'invisible, puis permuter les styles d'affichage. Si les divs ont un positionnement et une taille absolus, il n'y a absolument aucune chance de scintillement, et même si ce n'est pas le cas, vous pouvez difficilement faire mieux.

Answer 2

Il clignote parce que vous remplacez complètement la table ... si vous ajoutez ou supprimez des lignes de la table existante et chargez ensuite vos données AJAX dans la table résultante, elle ne clignotera pas.