Question

我使用JavaScript脚本更新表格的背景图片。表格和图像用于更新相机上的“运动检测单元”。该表用于存储每个单元的一些数据以进行运动检测。

要查看需要更改的单元格，我每2秒钟左右更新一次表格的背景图像，但是图像闪烁。在另一个HTML页面中，如果我更新放置在img标记中的图像，它不会闪烁，但似乎只是在更新图像，而在表中，它看起来像是已删除图像，而是使用了新图像。作为背景

是否可以更改表格背景图片的行为？（我曾考虑过将表格放在img元素的顶部，然后刷新图像。）

Answer 1

就像有人在评论中说的那样...您可以预加载图像。许多浏览器已经做到了这一点。

我对这个解决方案的建议：

在这种情况下，我不考虑使用

<table>。实际上，我会使用<canvas>元素并使用2D或3D上下文（WebGL）创建网格，因为这似乎是一个实时问题。至于动态内容，画布之所以胜出，是因为它不必为每个元素以及所有CSS层内容设置所有监听器。

例如：

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

let img = new Image()
img.onload = image => {
    ctx.drawImage(img, 10, 10, 100, 100)
    // Logic here

}
img.src = '/path/to/image.jpg'

请记住，以使此代码更加干净和可扩展。这只是一个简单的示例，说明如何在画布上绘制图像。

如果您不熟悉CanvasAPI，我强烈建议您深入了解本主题，因为它带来了许多新的可能性。

Answer 2

这就是我想出的，因为我已经能够刷新IMG标签中的图像而不会闪烁。

我创建了一个div，其大小与images / table相同，并将image定位为0，0，并将table定位为0，0。

更新表格的背景图片而不会“闪烁”

2 个答案:

我对这个解决方案的建议：