Blink

Description

In case you haven't seen it, this is from the Blink episode of Doctor Who. I expect I won't be the only one to have taken this approach.

The HTML

<bitty-1-3 data-connect="PageContent" data-send="blink">
  <img data-receive="blink" src="/images/open.jpg" />
  <div hidden>
    <!-- cheeky preload -->
    <img src="/images/closed.jpg" />
  </div>
</bitty-1-3>

The CSS

/* no extra styles for this site */

The JavaScript

function randInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

window.PageContent = class {
  async blink(_event, el) {
    await sleep(randInt(2000, 12000));
    el.src = "/images/closed.jpg";
    await sleep(100);
    el.src = "/images/open.jpg";
    this.api.forward(null, "blink");
  }
};