Prevent Image Caching - Javascript

Question

This function is supposed to grab a random image from the url everytime its called

function grabImg(){
    var img = document.createElement('img');
    img.src = 'https://picsum.photos/200/300';
    document.getElementById('flex-cat').appendChild(img);
}

And display it in the div below

<div class="container-1">
    <h2>Image Grabber</h2>
    <button class="btn btn-success" onclick="grabImg()">Grab Image</button>
    <div class="flex-box-container-2" id="flex-cat"></div>
</div>

Initially when the button is clicked, it calls the function and displays an image fine. However when the button is clicked on multiple times, instead of displaying different random images, the same image which was shown the first time keeps being displayed.

Any tips on how to prevent this?

"Any tips on how to prevent this?" You want to prevent any clicks after the initial click or do you want to click anytime and have the image change? — zer00ne
– zer00ne, Commented Sep 10, 2022 at 20:32

dale landry · Accepted Answer · 2024-08-01 05:44:52Z

1

Using picsum documentation, see Advanced Usage, you can request multiple images of the same size in your browser, add the random query parameter to prevent the images from being cached. Then you can randomize the number using a helper function, and concatenate using string literal => img.src = https://picsum.photos/200/300?random=${randomRange(10000)}.

EDIT: To make it truly random, track the random numbers created with the helper function using an array. If the value is present in the array already, then run the randomImage method again, else push the value into the array for tracking purposes and return the random value.

const arr = []
function randomImage() { // get a random number 
  let num = ''
  let tempRan = Math.random()
  if(!arr.includes(tempRan)){
    num = tempRan
    arr.push(num)
  }else{ 
    randomImage()
  }
  return arr[arr.length-1]
}

function grabImg() {
  var img = document.createElement('img');
  img.src = `https://picsum.photos/200/300?random=${randomImage()}`;
  document.getElementById('flex-cat').appendChild(img);
}

<div class="container-1">
  <h2>Image Grabber</h2>
  <button class="btn btn-success" onclick="grabImg()">Grab Image</button>
  <div class="flex-box-container-2" id="flex-cat">
  </div>
</div>

edited Aug 1, 2024 at 5:44

answered Sep 10, 2022 at 19:34

dale landry

8,6502 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

JLRishe Over a year ago

A range of 1-100 seems pretty small, for seemingly no good reason. Not limiting the range should ensure a distinct URL for each image. That would make the paragraph at the end of your answer a moot point: https://picsum.photos/200/300?random=${Math.random()}

dale landry Over a year ago

@JLRishe https://picsum.photos/200/300?random=${Math.random()} would indeed return a random value but that value could already be present.

Clifford Over a year ago

@dalelandry , yeah thanks it seems to be displaying different images now . I might have overlooked the random parameter in the documentation

JLRishe Over a year ago

@dalelandry The odds of Math.random() producing the same value twice in any reasonable amount of time is infinitesimally small. It's almost guaranteed to give unique values every time, for all intents and purposes. I don't see any reason to limit it to a certain range of numbers like you're doing. Seems like just unnecessary work/code, with less randomness.

dale landry Over a year ago

@Clifford note the subtle change I made to the code. I have removed the max param as suggested by JLRishe and kept the tracking array so duplications of the same number will not happen. Should give you a truly random integer with each new push of the grab image button.

|

Collectives™ on Stack Overflow

Prevent Image Caching - Javascript

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related