How to Auto Reload ♻ Image 🖼 on a Web Page
The basic process of auto refreshing an image on a web page simply involves adding a search query to the end of an images src. An images src is the web address of the image on the web server. By adding a different search query at the end of the images location on the web server, it forces the web server to serve up a fresh version of the image instead of pulling the image from cache. This is because the web server is tricked into believing it is a different image being requested.
The easiest and most logical way to ensure a unique search query, every time we wish to auto refresh the image is to use the current time, including seconds, for the search query.
Auto Refresh Webpage Image Using Javascript Time Query.
![Image of Auto Refresh Webpage Image Using Javascript Time Query.]( "Image of Auto Refresh Webpage Image Using Javascript Time Query.")
Auto Refresh Webpage Image Using Javascript Time Query.
How to Auto Refresh ♻ Image 🖼 on Web Page HTML [for web designers]
Here is the basic code for auto refreshing an image on a web page in HTML. Although the actual code is Javascript code, the code is inserted right into the images HTML code.
Here is a list of this you want to change in the image you wish to auto refresh's HTML code below:
- The id of the image. The example below is
idOfImageToReload but obviously you want to change that to whatever the id is for your image. Also be sure to change the id in the javascript function built into the images HTML code - document.getElementById('idOfImageToReload'). - The alt tag. The example below reads
Image of whatever your image is. Change it to whatever you want your auto refresh image's alt tag to be. - The height and the width of the image.
- How often you want the image to auto refresh. The number in the code below is
5000 which means 5 seconds. How ever number of seconds you want the image to auto refresh change that number and multiply by 1000. If you want the image to auto refresh every 30 seconds you would change that number to 30000 (note: no commas in the number).
An easier approach is to use the free tool below to automatically create the image auto refresh HTML code for you.
How to Auto Refresh ♻ Multiple Images 🖼 on Web Page HTML [for web designers]
To create the inline code that allows you to refresh more than one image on a web page (there is no limit to the number of images you can auto refresh on a web page) merely requires that you assign unique ID's to each image. Proper html coding specifications require that each ID for an element on a web page be unique anyway. Make sure to update the inline image javascript code to reference the proper image ID.
Click here for example web page to auto refresh multiple image on web page.
Free Template Tool to Create Image 🖼 Auto Refresh ♻ in HTML
Fill out the form below and click the Create Image Auto Refresh HTML button to have the HTML code created for you.
How to Auto Refresh ♻ Image 🖼 on Web Page Javascript [for web designers]
In case you don't want to use the inline, HTML/Javascript solution above, auto refreshing an image (with the Javascript separate from the HTML) simply involves setting a timer, at a reqular interval (that interval being set as the desired number of seconds we want between refreshes, in seconds * 1000, ie 7000 = 7 seconds, 30000 = 30 seconds, etc.). In Javascript, this is accomplished via the setInterval function.
Here is the basic Javascript code to auto refresh an image at set intervals:
1:
2:
3:
4:
5:
6:
7:
var varImgToAutoRefresh=document.getElementById("idOfImageToReload");
var varImgSrc=varImgToAutoRefresh.src;
setInterval(funcRefreshImage,5000);
function funcRefreshImage(){
varImgToAutoRefresh.src=varImgSrc+"?time="+new Date().getTime();
}
How to Auto Refresh ♻ Image 🖼 on Web Page PHP [for web designers]
Because PHP is a server sided and not client side programming language, you can't directly auto refresh an image on a web page using PHP. It can be accomplished indirectly using Javascript. See above on how to auto refresh an image on a web page using Javascript.
How to Auto Refresh Image 🖼 on Web Page [for regular people]
If there is an image you want to auto refresh on a web page of a web site, the best, easiest and most automated way to do this is through the use of a free browser extension of bookmarklet called Image Auto Refresh Bookmarklet.
To use Image Auto Refresh Bookmarklet:
- Go here to install the Image Auto Refresh Bookmarklet.
- Go to the web page that contains the image you wish to auto refresh.
- Click on the bookmarklet. A dialog box will ask you to click on the image you wish to auto refresh so the bookmarklet knows which image to auto refresh for you.
- Enter the number of seconds pause between auto refreshes. For example if you want the image to auto refresh on the web page once every 30 seconds, enter the number 30. If you want the image to auto refresh every 2 minutes enter 120 (120 seconds = 2 minutes).
- The bookmarklet will then proceed to auto refresh your selected image for you at the time interval you specified
