Dynamically creating images with a random lifespan

Question

Every 0-2 seconds I'm creating an image at a random location within a div like this

setTimeout("addImage()", Math.floor((Math.random() * 2000) + 1));

I want these images to disappear 3-5 seconds after they're created. Using $('img').first().remove() I can remove the oldest image, but I want to specifically remove them at a time after they're created, not just the oldest one. This will suffice if there is no other way, but it isn't ideal.

user_1772933 · Answer

Create them, then set a timeout for them individually.

setInterval("addImage()", Math.floor((Math.random() * 2000) + 1));

function addImage() {
  var tmpImg = new Image();
  tmpImg.src = 'https://picsum.photos/200?' + new Date().getTime();
  $('#imgs').prepend(tmpImg);
  tmpImg.onload = function() {
    setTimeout(() => {
      $(this).fadeOut()
    }, 4000);
  };
}

Dynamically creating images with a random lifespan

1 Answers