使用 jQuery 从一个站点设置图像的 src，该站点在每次刷新时提供不同的图像

Question

我想从This Person Does Not Exist 为 DOM 上的多个 img 对象动态加载 src。

使用 jquery attr 函数时，每个 img 对象都包含相同的图像。我希望每个对象都包含一个“刷新”的图像。

我已经成功地使用setTimeout 让它工作，但如果我不必等待它们加载，我会更喜欢。

$(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);
    });
});

Answer 1

尝试使用 DOM 属性的纯 JS 解决方案：

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

在 URL 的末尾使用# 来“欺骗”浏览器的缓存而不绕过上游缓存

您也可以在这里尝试这个技巧，将src 属性设置为自身：

 myImg.src = myImg.src;