How to have an img appear after time when page is loaded and disappear after time?

Question

Dumb or basic question but i'm learning HTML/CSS/JS and i'm missing the JS part.

I need some help making an img appear after the page is loaded with (let's say) a 3 seconds delay, remain visible for 4 seconds and disappear. Probably only possible with JS and "i don't even basic" in JS.

Managed to get it to hide after 4 seconds but it's needed to delay it first

<div>
<img src="images/browsetip.png" class="browse-tip" id="imgHideShow">
</div>



<script>
  function doHide(){
    document.getElementById( "imgHideShow" ).style.display = "none" ;
}
  function hideImage(){
    setTimeout( "doHide()", 4000 ) ;
}
</script>

Image for more coherency

score 0 · Answer 1 · answered Apr 02 '19 at 19:13

Use window.onload. This will not fire until the contents of the page is loaded.

<div>
<img src="images/browsetip.png" class="browse-tip" id="imgHideShow">
</div>



<script>
window.onload = function() {
  function doHide(){
    document.getElementById( "imgHideShow" ).style.display = "none" ;
  }
  function hideImage(){
    setTimeout( "doHide()", 4000 ) ;
  }
}
</script>

Dwigt · Answer 2 · 2019-04-02T19:28:32.807

You might look at something like this, which is executed when your page loads:

(function() {
   setTimeout(function() {
      document.getElementById( "imgHideShow" ).style.display = "none" ;
   }, 4000);

})();

If JQuery is available, use this:

$('document').ready(function(){
   setTimeout(function() {
      document.getElementById( "imgHideShow" ).style.display = "none" ;
   }, 4000);
});

You may want to look here for setting a timer on when to call the function: How do I delay a function call for 5 seconds?

It's essentially the same thing you're doing when you wait 4 seconds before hiding the image.

Also, here's a better description of calling functions based on window.onload and document.onload: window.onload vs document.onload.

score 0 · Accepted Answer · answered Apr 02 '19 at 19:21

I hope this could help you.At the initial stage you can hide the image by using cssand after all dom content loaded you can show the image after 3 seconds.Then just after showing the image you can hide it after a 4 seconds delay.

<style>
    .browse-tip{
      display:none;
    }
  </style>
<div>
<img src="https://i.stack.imgur.com/3Hj95.png" class="browse-tip" id="imgHideShow">
</div>



<script>
  document.addEventListener("DOMContentLoaded", function(){
    setTimeout(function(){
      showImage();
      setInterval(hideImage, 4000);
    },3000);
  });
  function hideImage(){
    document.getElementById( "imgHideShow" ).style.display = "none" ;
  }
  function showImage(){
    document.getElementById( "imgHideShow" ).style.display = "block" ;
  }
</script>

This works splendidly well! Thank you! *insert surprised pikachu here* — Aleix, Apr 02 '19 at 21:06

Rodrigo Rea · Answer 4 · 2019-04-02T21:05:05.270

    <div id="future-image"></div>

<script>
(function() {

   var img = document.createElement('img');
   img.setAttribute('src','images/brosetip.png');
   img.setAttribute('id','imgHideShow');
   img.setAttribute('class','browse-tip');

   setTimeout( function(){
        var div = document.getElementById('future-image');
        div.insertBefore(img, div.firstChild);
        removeImg(div);
   },4000);

   var removeImg = function(div){
        setTimeout( function(){
            div.parentNode.removeChild(div);
        },4000);
   }

})();
</script>

How to have an img appear after time when page is loaded and disappear after time?

4 Answers4