Force an img to re-download from the same URL

Question

I am using randomly-generated images from this API: http://loremflickr.com/320/240

When the application starts, it takes a random image using that link.

When I click on a button, I want to update the image by setting the img src -- but the URL is the same, so the browser sees the same link so does not call the api, so a new random image isn't generated.

Here is the html code:

<img style="float:right;position: relative;top: 50%;transform: translateY(-50%);" src="{{gifLoader}}"/>

The button has a click event which calls this function:

nextImg()
  {
    this.gifLoader = "http://loremflickr.com/" + window.screen.width + "/" + window.screen.height;
  }

Please post the code that demonstrates what you try to accomplish, what you tried. — Günter Zöchbauer, Jul 17 '17 at 17:35
Just add a simple timestamp as a cache buster ... https://www.virendrachandak.com/techtalk/cachebuster-code-in-javascript/ — CBroe, Jul 17 '17 at 17:42
When you investigate the DOM in the browsers devtools, do you see the `src="..."` with the expected URL? — Günter Zöchbauer, Jul 17 '17 at 17:43

Manish · Accepted Answer · 2017-07-17T17:51:44.283

4

Try adding a query parameter like a timestamp. As the timestamp will be different each time it will be considered a new request and you will get a new image each time to update the img src

this.gifLoader = "http://loremflickr.com/" + window.screen.width + "/" + window.screen.height +"?timestamp=" + new Date().getTime();

Hope this helps :)

edited Jul 17 '17 at 17:51

answered Jul 17 '17 at 17:46

Manish

4,692
3
29
41

Accepted , may I ask another related question there's a delay period to download the image from the server how to catch this time , to put a loading gif or anything on this period – Ahmed Mohsen Jul 17 '17 at 17:53
1

for that you can have a spinner/loader image. just before changing the url set the visibility of that loader image to visible then update the image url and hide the lodaer image on onload event of the image. For reference see this [question](https://stackoverflow.com/questions/4635388/how-to-display-loading-image-while-actual-image-is-downloading) – Manish Jul 17 '17 at 17:56

score 1 · Answer 2 · answered Jul 17 '17 at 18:07

1

You can try cache buster like mentioned below:-

"http://loremflickr.com/320/240?rnd="+(new Date()).getTime()

answered Jul 17 '17 at 18:07

Prathmesh Dali

2,250
1
18
21

Force an img to re-download from the same URL

2 Answers2