Reply To: Safari @keyframes starts around 1s before the image is rendered

[Shikkediel]

Why wouldn’t you just append the already loaded image? Can’t see why a second item is needed.

const image = new Image();

image.onload = () => {
  document.getElementById('placeholder').remove();

  this.setAttribute('width', '150');
  this.setAttribute('height', '150');

  this.style = `
    animation-name: testAnimation;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    background: red;
  `;

  document.body.appendChild(this);
}

image.src = 'http://deelay.me/1000/https://cdn.pixabay.com/photo/2014/06/03/19/38/board-361516_1280.jpg';

Apparently Safari isn’t aware of caching…

Edit – the forum doesn’t seem to process the arrow well.