V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
johnnyb
V2EX  ›  编程

如何避免 js 更新 <table> 时的闪烁?

  •  
  •   johnnyb · 2013-10-28 00:50:06 +08:00 · 4287 次点击
    这是一个创建于 3805 天前的主题,其中的信息可能已经有所发展或是发生改变。
    一个部门管理的界面,希望[增/删/改/查]时只刷新表格内容,目前是这样做的,
    php 模板放个<table>标签占位,具体内容由 js 生成:

    // file: views/index.php

    <div>
    <table id="data_table">
    <!-- 留空,让 js 来填充数据 -->
    </table>
    </div>

    // file: index.js

    var fill_table = function() {
    var table_html = '<tbody>…</tbody>';
    $('#data_table').html(table_html);
    };

    $('#data_table').ready(fill_table);

    虽然可以局部刷新,但是会闪烁 :( 该如何避免?

    嵌 C 码农首次接触 WEB,完全不懂章法,也不知上面做法对不对,请指教 :-S
    7 条回复    1970-01-01 08:00:00 +08:00
    Kaiyuan
        1
    Kaiyuan  
       2013-10-28 01:46:18 +08:00   ❤️ 1
    我是替换内容前将标签设置成透明然后再替换内容之后再显示。
    我现在的一个「坑」就是用这用方式替换内容: http://boxks.github.io/html_css/?easypage


    或者你可以替换之前在旁边创建一个标签存放内容然后滑动替换原来的内容。
    FrankFang128
        2
    FrankFang128  
       2013-10-28 01:53:16 +08:00   ❤️ 1
    我做了易得 demo ,没有发现你说的「闪烁」 http://jsbin.com/AJUSAgI/1/edit
    有可能是因为你生成的数据很多,以至于 table 会在渲染时突然白一下。
    我不知道为什么你不接受闪烁,你要解决这个问题可以从视觉的角度下手。
    比如给 table 一个淡入淡出,或者添加一个 loading gif。
    总之你的描述不是很清楚。
    FrankFang128
        3
    FrankFang128  
       2013-10-28 01:54:51 +08:00
    为什么 V2ex 不能编辑已经 post 了的话,打错了一个词:
    「我做了易得 demo」=> 「我做了一个 demo」
    johnnyb
        4
    johnnyb  
    OP
       2013-10-28 09:30:08 +08:00
    感谢 @Kaiyuan @FrankFang128 的回答。我这边闪烁明显,大概是因为整个<tbody>都在js中生成,在更新的时候,底部文字会往上收缩。

    初步的想法是,php 模板里面先放一个空白的 <tbody>,然后在 js 中更新每个单元格中的内容,不知道这样效率如何。

    滑动替换很赞,待我‘研究’一下怎么实现。
    FrankFang128
        5
    FrankFang128  
       2013-10-28 09:39:35 +08:00 via Android
    @johnnyb 你给 table 一个固定高度就可以了吧
    FrankFang128
        6
    FrankFang128  
       2013-10-28 09:41:18 +08:00 via Android
    @johnnyb 理论上你这种频繁用JS访问HTML的方法效率不高,但只要不超过1s,用户不会在意的。
    xu33
        7
    xu33  
       2014-04-14 10:56:56 +08:00 via iPhone
    可以用逐行更新的方式代替整体替换
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1209 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 18:11 · PVG 02:11 · LAX 11:11 · JFK 14:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.