Question

愚蠢或基本问题，但我正在学习HTML / CSS / JS，但缺少JS部分。

我需要一些帮助，以使img在页面加载后（例如）延迟3秒后出现，并在4秒钟内保持可见状态并消失。可能只有使用JS才能实现，而在JS中“我什至不基本”。

设法让它在4秒后隐藏起来，但需要先延迟它

<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

Answer 1

使用window.onload。在加载页面内容之前，不会触发。

<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>

Answer 2

您可能会看到类似这样的内容，该事件在您的页面加载时执行：

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

})();

如果JQuery可用，请使用此：

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

您可能希望在此处查找设置何时调用该函数的计时器： How do I delay a function call for 5 seconds?

在隐藏图像之前等待4秒钟，这与您所做的基本上相同。

此外，这是基于window.onload和document.onload：window.onload vs document.onload的调用函数的更好描述。

Answer 3

希望对您有所帮助。在初始阶段，您可以使用css隐藏图像，在加载所有dom内容之后，您可以在3秒后显示图像，然后在显示图像之后，您可以在4秒后隐藏图像延迟。

<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>

Answer 4

    <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>

加载页面后如何使img在时间后出现并在时间后消失？

4 个答案: