I have an exercise in wich i need to make a page for my school, in this exercise I am tasked of making a page in wich the user will be able to see faces from everyone in the clasS. I wanted to think "a litle outside the box" and use https://thispersondoesnotexist.com to generated different faces.

I found https://fakeface.rest that allows me tu give dirrections to thispersondoesnotexist.com alowing me to set an age range and a size for the image https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25

Here is my issue however: The page is loading every links at the same time and displaying the same image mutiple times like this: Screenshot with the two same pictures

Thats why i wanted to know if there was a way for me to load the two images at a different time so that they show a different "person" each time.

It would be preferable to avoid using js (html and css) but if this is the only solution then so be it: i'll use it

Ps: i tried using eager/lazy loading but that didnt work

CodePudding user response：

Here I added an additional garbage parameter to each url, to make the urls different:

<img src="https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25&blart1">
<img src="https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25&blart2">
<img src="https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25&blart3">
<img src="https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25&blart4">

CodePudding user response：

They actually tell you how to do that with the API:

If you want to insert multiple different faces and prevent the browser caching then you can append any number or random string to the end of the endpoint as follows: https://fakeface.rest/face/view/1?gender=male https://fakeface.rest/face/view/anythingcangohere_theapidoesntdoanythingwithit?gender=male

Source: inserting into html (scroll past the image)