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.

CodePudding user response：

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);
  };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='imgs'></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>