如何无需延迟用jQuery为多个DOM图片加载This Person Does Not Exist独立图片

嘿，我完全懂你遇到的这个坑！之前用这个网站的图片时也踩过同样的雷——直接循环设置src会导致所有图片一模一样，靠setTimeout加延迟虽然能解决，但等待加载的体验实在太差了。

问题根源 #

其实核心原因有两个：

• 浏览器的缓存机制：如果多个请求的URL参数太相似（比如时间戳生成太快，多个请求用了同一个时间戳），浏览器会直接复用缓存的响应。
• 目标网站的服务端逻辑：短时间内的重复请求可能会被服务端视为同一请求，返回相同的生成图片。

你的setTimeout之所以有效，是因为每个请求间隔了2秒，让服务端有足够时间生成新图片，同时避免了浏览器缓存冲突，但这显然不是最优解。

最优解决方案：用唯一随机参数替代时间戳 #

我们可以给每个请求的URL添加一个完全唯一的随机参数，确保浏览器和服务端都把每个请求当成独立的，这样就能并行加载所有图片，无需等待延迟：

$(document).ready(function() {
  $('.imgDNE').each(function() {
    // 生成一个随机字符串作为唯一参数，避免重复
    const uniqueId = Math.random().toString(36).slice(2);
    $(this).attr("src", `https://thispersondoesnotexist.com/image?${uniqueId}`);
  });
});

为什么这个方法有效？ #

• Math.random().toString(36).slice(2)会生成一个由字母和数字组成的随机字符串，几乎不可能重复，确保每个URL都是独一无二的。
• 浏览器会认为每个URL都是新资源，不会复用缓存；服务端也会把每个请求当成独立的生成请求，返回不同的图片。

额外小技巧（可选） #

如果偶尔还是出现重复图片的情况，可以再加一层保险：先把img的src设为空，再设置新的URL，强制浏览器重新发起请求：

$(document).ready(function() {
  $('.imgDNE').each(function() {
    const $img = $(this);
    const uniqueId = Math.random().toString(36).slice(2);
    $img.attr("src", "")
         .attr("src", `https://thispersondoesnotexist.com/image?${uniqueId}`);
  });
});

这样就能彻底解决所有图片显示同一张的问题，而且所有图片会并行加载，没有延迟~

内容的提问来源于stack exchange，提问作者Trystan Rivers