Change image after 1 second

I want to display loading.gif on a webpage for 1 second and than change it to another .gif that will be displayed on page permanently.

While loading.gif is displayed, I don't actually want to pre-load the main.gif, I want it to start loading for the user when it is actually displayed.

Any ideas how to do that?

Thanks

 

https://www.google.com/search?q=settimeout

 

This question is supposed to be in HTML or Javascript. Anyways, Here's a quick fix : (Make sure you have jQuery file in your head section.)

1. Place this HTML code wherever you want the display the image.

<div id="imgChange"><img src="URL_TO_LOADING.GIF"/></div>

2. Place this piece of script in the head section.

<script type="text/javascript">
$(document).ready(function() {
$('#imgChange').setTimeout(function() {
$(this).html('<img src="URL_TO_MAIN.GIF"/>')}, 1200); //Adjust the seconds. 1000 Units = 1 second.
});
});
</script>

 

You want to change the ".gif" every second, It means that you have more than one ".gif" files

So you can use my code it's very easy to use, Just change the images array with your ".gif" image.

Here i use setInterval method of jQuery....

You can set time interval as you want...
CODE :

<script src="http://code.jquery.com/jquery-1.11.0.min.js" <http://code.jquery.com/jquery-1.11.0.min.js> ></script> <script type="text/javascript"> $( document ).ready(function() {swap_image();})
function swap_image(){
var images = ['image1.gif', 'image2.gif', 'image3.gif', 'image4.gif'];
var i = 0;
setInterval(function () {
$('.demo img').prop('src',images);i++;
if(i>images.length){swap_image();}
},4000);
}
</script>
<div class="demo"><img src="image1.gif"></div>