How to wait 5 seconds for images in a web page to be displayed_html/css_WEB-ITnose

How to make images on a web page wait for 5 seconds before displaying.

When the webpage is opened, the pictures in the webpage will be displayed immediately. How to make a certain picture display 5 seconds after the web page is opened.

Reply to the discussion (solution)

1. There is a judgment event for image loading, and set the display and hiding of the image object in the event
2. Add a timer to the web page, it’s time 5s, display the specified picture

<style>#div1{height:100px;width:100px;background-color:yellow;display:none}</style><script type="text/javascript">	window.onload=function(){		var i=1;		setInterval(function(){			i++			if(i==5){				document.getElementById("div1").style.display="block";			}		},1000);	}</script><div id="div1">11222</div>

JS timer setInterval

Use js to control it, setTimeout()

Use timer setInterval

setTimeout() is a defined function that is executed after a certain period of time after the event is triggered. It is executed only once and the execution time is defined by yourself.
setInterval() is executed every certain time after the event is triggered. The time is customized. It is repeated execution
The author can choose for himself

There are many errors in the code on the 2nd floor:
1. According to the requirements, setTimeout() should be used first instead of setInterval(). This function has been transcribed on the 7th floor illustrate.
2. And if it is to be displayed after 5 seconds, there is no need to set a one-second event and count it, which is superfluous.
3. If you use setInterval(), after triggering the display operation, you should use clearInterval() to cancel unnecessary continuation of timing.

The correct way is to use setTimeout() directly, and it will be done in one step in 5 seconds:
9c5d1ec2b64cefe559e28ea66c2725a2
4ec11beb6c39d0703d1751d203c17053
document.getElementById("theforever").style.display="none"
setTimeout(function (){
document.getElementById("theforever").style.display="block";
}
,5000);
2cacc6d41bbb37262a98f745aa00fbf0

$("object").delay("5000").animate();