Display an Image tag after countdown timer finishes JavaScript

No Comment

In this post, we will see how to load an HTML image element after a specified countdown timer is finished through a JavaScript function (client-side scripting) and this action will be performed from a button click event. First, let’s see the JavaScript code snippet.

Code Snippet

This JS Code snippet creates an image inside the div tag when the timer is elapsed and the value of the countdown count is zero.


var timeleft = 5; // set countdown timer in seconds
var downloadTimer = setInterval(function(){
  if(timeleft <= 0){
	var downloadfilediv = document.getElementById("dimgfile");
	var dynImgTag = document.createElement("img");
	dynImgTag.setAttribute("src","YourImgDirPath" + filename + ".png");
	dynImgTag.setAttribute("alt","");
	downloadfilediv.appendChild(dynImgTag);
	document.getElementById("cdldiv").hidden = true;
	clearInterval(downloadTimer);
  }
  document.getElementById("cimgdlbtn").value = "Loading Image in " + timeleft + " secs";
  timeleft -= 1;
}, 1000);

How it works – Screenshots

Download this sample and test it yourself – .html file

How to implement – Steps

Scenario:

After the button click, start a countdown timer, say star-time is 5secs and end-time is 0secs. You need to display the remaining time by renaming the button caption after every second. When the timer is elapsed and its value is zero(0), generate a <img> tag and set its attributes. Append <img> tag within existing <div> tag. Load the image on the browser and hide the button. Achieve all these from the client-side script (Javascript).

What do we require?

an empty “<div>” tag with unique ‘id’ id=”dimgfile”
a JS function called createImgLink(), under <script> tag
make use of the setInterval() and clearInterval() function – to countdown timer
after every sec, display the remaining secs as a button caption
when sec=0, use document.createElement() to create an image tag
an input button which will call a Javascript function from onclick event

Full HTML code:


<html>
   <head>
      <style>
         .hideDownloadBtn{
         display: none;
         }
         .downloadFileBtn{
         padding : 1rem 2rem 1.0625rem 2rem;
         border-width : 0;
         background-color : #008CBA;
         border-color : #007095;
         font-size : 18px !important;
         color:white !important;
         }
      </style>
      <script>
         function createImgLink(filename){
         	 var timeleft = 5; //set countdown timer in seconds
         	 var downloadTimer =  setInterval(function(){
         	  if(timeleft <= 0){
         		var downloadfilediv = document.getElementById("dimgfile");
         		downloadfilediv.appendChild(document.createElement("br"));	
         		downloadfilediv.appendChild(document.createElement("br"));	
         		var sTag = document.createElement("span");
         		sTag.innerHTML ='Right click and select "Save image as..." or "Download image"';
         		downloadfilediv.appendChild(sTag);
         		downloadfilediv.appendChild(document.createElement("br"));	
         		downloadfilediv.appendChild(document.createElement("br"));	
         		
         		var dynImgTag= document.createElement("img");
         		//dynImgTag.setAttribute("src","https://helphindime.com/r/img/" + filename + ".png");
         		dynImgTag.setAttribute("src","https://www.codeindotnet.com/wp-content/uploads/2022/10/add-anchor-tag-in-div-element-450x338.png");
         		dynImgTag.setAttribute("alt","");
         		downloadfilediv.appendChild(dynImgTag);
         		document.getElementById("cdldiv").hidden = true;
         		clearInterval(downloadTimer);
         	  }
         	  document.getElementById(" cimgdlbtn").value = "Loading Image in " + timeleft + " secs";
         	   timeleft -= 1;
         	 }, 1000);
         }
         
      </script>
   </head>
   </body>
   <div  id="cdldiv">
      <input type="button" id="cimgdlbtn" value="Download" onclick="this.disabled=true;createImgLink('YourFileName')" class="downloadFileBtn">
   </div>
   <div  id="dimgfile"></div>
</html>

JS Code Explaination

var timeleft = 5;

Create a variable to set a start time value. start time value is set to 5 secs.

var downloadTimer = setInterval(function(){
//your code
}, 1000);

setInterval() function is used to repeat a specified function at every given time-interval. In code, the function will be called repeatedly after every 1sec (1000 milliseconds).

if(timeleft <= 0)
{
…..
}
……
timeleft -= 1;

This condition will check, if timeleft value is equal to zero or not after every second. If the value is greater than zero then timeleft value will be decremented. If timeleft value is zero then it will execute the remaining code to generate an image tag.

document.getElementById(“cimgdlbtn”).value = “Loading Image in ” + timeleft + ” secs”;

This will rename the button caption with the number of seconds left after every time interval. example – “loading image in 4 secs”

var downloadfilediv = document.getElementById(“dimgfile”);

Assign the div tag to a variable. The tag in which the image element will get created,

var dynImgTag = document.createElement(“img”);

Use createElement syntax to create an HTML element.

dynImgTag.setAttribute(“src”,”YourImgDirPath” + filename + “.png”);
dynImgTag.setAttribute(“alt”,””);

set image tag attributes like ‘src’ and ‘alt’

downloadfilediv.appendChild(dynImgTag);

Append the newly created image tag into the div tag.

document.getElementById(“cdldiv”).hidden = true;

Use this if you want to hide the button section after the code is executed and the image is loaded successfully. Here, hiding the full div element in which the button is available.

clearInterval(downloadTimer);

After executing all code, clear the time interval.

The same code is implemented in the Sample file as well. Please download it and try it yourself.

Hope you liked this post! Thanks!! 🙂