Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Answers Viewqa JavaScriptQuestions Show spinner while loading image using JavaScript
Login         

View Questions and Answers by Category

Advertisements


 
Have Programming Question? Ask it here!
 
 
 


samar
Show spinner while loading image using JavaScript
1 Answer(s)      3 years and 9 months ago
Posted in : JavaScript Questions


Hello sir

I am working on a web page which has .png image in middle of it. Other part of the page contains the set of links which , when clicked, the entire page reloads and looks exactly the same as before except for the chart in the middle of the page.

The problem is that when the user clicks on the link, it may take a couple of seconds before the chart changes.

What i want do is it shows spinner while loading image.

Please Reply ASAP and also give code.

Best regards


Advertisement
View Answers

December 11, 2010 at 3:40 PM


You can do this by using the power of setTimeout() method. This allows you set a timer to trigger a function call in the future, and calling it won't block execution of the current / other functions.

First, Position a div containing the spinner above the chart image, with it's css display attribute set to none:

<div>&nbsp;<img src="spinner.gif" id="spinnerImg" style="display: none;" /></div>

The nbsp stop the div collapsing when the spinner is hidden.

function chartOnClick() {
  //How long to show the spinner for in ms (eg 3 seconds)
  var spinnerShowTime = 3000

  //Show the spinner
  document.getElementById('spinnerImg').style.display = "";

  //Change the chart src
  document.getElementById('chart').src = '/charts/10.png';

  //Set the timeout on the spinner
  setTimeout("hideSpinner()", spinnerShowTime);
}

function hideSpinner() {
  document.getElementById('spinnerImg').style.display = "none";
}


Related Tutorials/Questions & Answers:
Show spinner while loading image using JavaScript
Show spinner while loading image using JavaScript  Hello sir I am... of seconds before the chart changes. What i want do is it shows spinner while loading.... function chartOnClick() { //How long to show the spinner for in ms (eg 3 seconds
loading image
animated loading image on 1st JSP while the request is being processed. If I use form submit , the animated loading does not show animated.I would like to know how to show animated loading image on regular form submit
Advertisements
maximize an image using javaScript
maximize an image using javaScript  Write the code to maximize an image using javaScript
Class.forName will do while loading drivers
Class.forName will do while loading drivers  What Class.forName will do while loading drivers
loading image - Swing AWT
loading image  give me a source code to add any wallpaer of my PC as a background image to jpanel on a jframe
Adding image to database through jsp or HTML page ,while adding only image should show.
Adding image to database through jsp or HTML page ,while adding only image should show.   Adding image to database through jsp or HTML page,while adding only image should show. After that i need view that uploaded image from
Exception while inserting image in oracle using java
Exception while inserting image in oracle using java  import java.sql.*; import java.io.*; class Oracle2 { public static void main(String args...()); System.out.println("Image length: "+f.length()); System.out.println("No.of rows
Hide show HTML forms using javascript
Hide show HTML forms using javascript  How to hide a HTML form in my application using JavaScript?   HTML Code to create checkbox <...;div id="yourDiv"> ...other forms... </div> JavaScript function to hide
how to save uploaded image in database using javascript
how to save uploaded image in database using javascript  Please can you tell me how to store uploaded image in database using java I'll use...(form, file) { allowSubmit = false; if (!file) return; while (file.indexOf
pre Page load display an image loading - JSP-Servlet
this. Thanks  Yes i have to display an loading image while page... some pages are loading very slow, while the page is processing we need to display a loading image. How to achieve this requirement. Thanks Manu  
how to retrieve image from mysql database using java and show it in HTML img tag ?
how to retrieve image from mysql database using java and show it in HTML img tag ?  how to retrieve image from mysql database using java and show it in HTML img tag
how to show popup in javascript
how to show popup in javascript  How to show popup in javascript
JQuery Spinner
JQuery Spinner   I am working in JQuery and i want to create SPinner for getting Credit Card Expiry Date in the form of MM/yyyy . Will you Please help me How to create the Spinner . Thank you. Regards Arun
How to access the image file from project folder itself while writing to pdf using itext?
How to access the image file from project folder itself while writing to pdf using itext?  I am writing a pdf using itext where i add a image in the beginning of the document. When i use image = Image.getInstance("C
Image Slide Show using 'Space gallery' plug-in
Image Slide Show using  'Space gallery' plug-in In this tutorial , we will create a slide show using 'Space gallery' plug-in .In this example , two tabs are given. in one tab 'Space gallery' slide show
how to show random image in ASP.net?
how to show random image in ASP.net?  hello bros i saw in many websites..there is a programming of random image changing.... i want to use this in my... can do it.may be it will dot net or may javascript code..suggest me bros
JavaScript Show Date
JavaScript Show Date..., we are going to display the current date using JavaScript. You can see... the current date. Here is the code: <html> <h2>Show
JavaScript hide image
; In this section, we are going to show and hide image on clicking the button using the JavaScript. In the given example, we have defined an image using <img>... JavaScript hide image
javascript image not found
javascript image not found  javascript if image not found   <a href='$image'> <img alt='No Image' src='$image' onError="this.parentNode.onclick=function() {return(false);}"> </a>
JavaScript Show Hide table
JavaScript Show Hide table...; In this section, we are going to show and hide table on clicking the button using...='javascript:showTable();' value='show'> <input type='button' onClick
Program in javascript to show the current location
Program in javascript to show the current location  Hi All, Actually... loads...so, can you give me a simple program in javascript to show the current location in JavaScript? Thanks
changing an image based on checking checkbox using HTML & JavaScript, Please put div blocks
changing an image based on checking checkbox using HTML & JavaScript, Please...;script type="text/javascript"> function showImage...) { document.getElementById("image").style.visibility = 'visible
dynamic image change javascript
dynamic image change javascript  How to display images in JavaScript dynamically
Spinner in Flex4
Spinner control in Flex4: Flex4 introduced a new a Spinner control which was not available in MX. In Flex4 Spinner control is called a Spark component... in Spinner control. The tag of Spinner control is <s:Spinner>
How to make a loading symbol
How to make a loading symbol Learn here to create your own loading symbol that show the loading process in the website. New File: Take a new document. Draw a Circle: Draw a circle with this "f20b27" color by using
Show Image Scale
Show Image Scale       This section shows you the scales of image. To show scales of Image, an image is defined inside the class folder and calls the ImageIcon class to return
Show image and text on same jsp page
Show image and text on same jsp page  Hi all, I have to display image and text on the same jsp page. The text and image are both retrived from mysql database. The image is shown correctly on seperate jsp page but when shown
JavaScript move image
; This section illustrates you how to move an image on the window using JavaScript. In the following code, we have defined an image 'node.jpg' in order to move... JavaScript move image
Dynamic loading of Combo box list using servlet - JSP-Servlet
Dynamic loading of Combo box list using servlet  I have the category..., retrive it in a servlet, By using this value communicate to the data base...(); while(rs.next()){ request.setAttribute("userid", rs.getString(2
java code using while loop
java code using while loop  
Hide/show Image by click
Hide/show Image by click In this tutorial ,we will discuss about how to display image by click using jQuery. In the below example, a image and two lines are given. By clicking on upper line , it will hide the image and the line
 

 

 

DMCA.com