Set the src of an image with jQuery from a site that provides a different image with each refresh

1
votes

I want to dynamically load the src from This Person Does Not Exist for multiple img objects on the DOM.

When using the jquery attr function, every img object contains the same image. I want each object to contain a "refreshed" image.

I have successfully managed to get it to work using setTimeout but would prefer if I didn't have to wait for them to load.

$(document).ready(function() {
    var time = 0;

    $('.imgDNE').each(function(e) {
        time+=2000;
        var obj = $(this);
        window.setTimeout(function() {
            $(obj).attr("src","https://thispersondoesnotexist.com/image?"+ new Date().getTime());
        },time);
    });
});
1
javascriptjqueryimagesrc

1 Answers

0
votes

Try a pure JS solution using DOM attributes : 

document.addEventListener("DOMContentLoaded", function() {
    var myImg = document.getElementsByClass("imgDNE")
    myImg[0].setAttribute("src", "https://thispersondoesnotexist.com/image#" + new Date.now());
});

Use # at the end of the URL to "fool" the browser's cache without bypassing upstream caches

You could also try this trick here, by setting the src attribute to itself : 

 myImg.src = myImg.src;