防止；闪烁“；ExtJS网格中图像的网格更新/刷新

我使用返回HTML标记的列渲染器在ExtJS网格中显示图像。问题在于，每次网格更新时，图像都会“闪烁”（即消失并重新出现）。有没有办法防止这种情况？下面是我正在做的一个简化示例：

Ext.create('Ext.grid.Panel', {
  title: 'My Grid',
  store: myStore
  columns: [
    {
      header: 'Image', 
      dataIndex: 'imgUrl',
      renderer: function(imgUrl, meta, record) {

        // Add a mouse-over / tooltip that shows the name
        meta.tdAttr = 'data-qtip="' + Ext.String.htmlEncode(record.getName()) + '"';

        return '<img src="' + imgUrl + '">';
      }
    }
  ]
});

Ext.create（'Ext.grid.Panel'{
标题：“我的网格”，
商店：myStore
栏目：[
{
标题：“图像”，
数据索引：“imgUrl”，
渲染器：函数（imgUrl、meta、record）{
//添加鼠标悬停/显示名称的工具提示
meta.tdAttr='data qtip=“”+Ext.String.htmlEncode（record.getName（））+”；
返回“”；
}
}
]
});

我发现使用CSS背景图像而不是

标记可以解决问题（仅使用Chrome进行测试）。例如：

Ext.create('Ext.grid.Panel', {
  title: 'My Grid',
  store: myStore
  columns: [
    {
      header: 'Image', 
      dataIndex: 'imgUrl',

      width: 16, // The width of the background-image

      renderer: function(imgUrl, meta, record) {

        // Add a mouse-over / tooltip that shows the name
        meta.tdAttr = 'data-qtip="' + Ext.String.htmlEncode(record.getName()) + '"';

        meta.tdAttr += 'style="background-image: url(\'' + imgUrl + '\'); background-repeat: no-repeat;"';
      }
    }
  ]
});

---

你的图像被浏览器缓存了吗？好问题。我确实确认它们正在被缓存。每次网格更新时，浏览器都不会重新请求它们。