GWT - Celltable image flickering on Chrome

Question

We have a custom implementation of CellTable in which there is a custom column to render label and image. As part of hovering on a table row, we call table.redrawRow(rowNum) to render some context menu.

However, doing that, cause the text and image column to re-render the image (make a server call to fetch the image). This causes a flickering effect. This only happens in Chrome (version I am using - Chrome27)

The table row looks like this:

<tr __gwt_row="0" __gwt_subrow="0" class="GAH0TQLMKD">
   <td class="GAH0TQLKKD GAH0TQLNKD GAH0TQLOKD">
      <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-65" tabindex="0">
         <div style="border-collapse: separate; border-spacing:0">
            <div style="display:table-cell;vertical-align:middle">
              <img src="icon.png" alt="" style="vertical-align:middle; border: 0;width:16px;height:16px; ">
            </div>
            <div class="GAH0TQLMJD" style="display:table-cell"><a href="javascript:;"><b>Contiki</b></a></div>
         </div>
      </div>
   </td>
   <td class="GAH0TQLKKD GAH0TQLNKD">
      <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-66">Travels</div>
   </td>
   <td class="GAH0TQLKKD GAH0TQLNKD">
      <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-67">Blah</div>
   </td>
   <td class="GAH0TQLKKD GAH0TQLNKD">
      <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-68">Blah</div>
   </td>
   <td class="GAH0TQLKKD GAH0TQLNKD">
      <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-69">2013-07-10</div>
   </td>
   <td class="GAH0TQLKKD GAH0TQLNKD">
      <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-70">5</div>
   </td>
   <td class="GAH0TQLKKD GAH0TQLNKD">
      <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-71">07/10/2013 01:53 AM</div>
   </td>
   <td class="GAH0TQLKKD GAH0TQLNKD GAH0TQLILD GAH0TQLDAD" align="right">
      <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-72">
         <div class="GAH0TQLFAD">
            <div style="width:64px; height:17px"></div>
         </div>
      </div>
   </td>
</tr>

I don't see flickering on Firefox or IE9.

Note: My Cache-Control headers are set to no-cache.

Any thoughts? Ideas?

score 1 · Accepted Answer · answered Jul 11 '13 at 09:46

1

If you ask the browser not to cache the image, and you ask it to draw the image, it'll re-download it.

So either change your caching strategy for the image, and/or your strategy for updating the table (using a redrawRow during a hover to display something new seems suboptimal; the cells should rather listen to the mouse events and update their DOM dynamically)

answered Jul 11 '13 at 09:46

Thomas Broyer

64,353
7
91
164

Hi Thomas, Is there an example you can point me to where cells update their DOM dynamically? – ankurvsoni Jul 30 '13 at 06:26
`DatePickerCell` displays a popup on click, and `AbstractCell#setValue` redraws the cell (and only the cell); `setValue` is used in `EditTextCell` to switch between _value as text_ and a textbox for input. Finally, `ImageLoadingCell` redraws the cell on load or error of the image, `CompositeCell` walks its DOM, and `ButtonCellBase` updates the CSS classes of its element. – Thomas Broyer Jul 30 '13 at 10:31

GWT - Celltable image flickering on Chrome

1 Answers1