Блог

Я использую скрипт JavaScript для обновления фонового изображения таблицы. Таблица и изображение используются для обновления «ячеек обнаружения движения» на камере. Таблица используется для хранения некоторых данных для обнаружения движения для каждой ячейки.

Чтобы увидеть, какие ячейки необходимо изменить, я обновляю фоновое изображение таблицы каждые 2 секунды или около того, но изображение мерцает. На другой HTML-странице, если я обновляю изображение, помещенное в img тег, оно не мерцает, а просто обновляет изображение, в то время как в таблице это выглядит так, как будто изображение удалено, а новое используется в качестве фона

Есть ли способ изменить это поведение для фонового изображения таблицы? (Я думал о том, чтобы поместить таблицу поверх img элемента, а затем обновить изображение.)

Как кто-то сказал в комментариях… вы могли бы предварительно загрузить изображение. Многие браузеры делают это уже под капотом.

Мой совет к этому решению:

<table> это то, что я бы не рассматривал в данном случае. На самом деле я бы выбрал <canvas> элемент и создал сетку, используя 2D или 3D контекст (WebGL), потому что это, похоже, проблема реального времени. И когда дело доходит до динамического материала — canvas выигрывает, потому что ему не нужно настраивать все списки для каждого элемента и все эти 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, я настоятельно рекомендую углубиться в эту тему, потому что она открывает много новых возможностей.

Вот что я придумал, поскольку я уже смог обновить изображение в теге IMG без мерцания.

Я создал div того же размера, что и изображения / таблица, и расположил изображение на 0, 0, а таблицу также расположил на 0, 0.