图像重新加载原型 if-modified

Posted 2023-02-19

【中文标题】图像重新加载原型 if-modified

【英文标题】：Image reload prototype if-modified

【发布时间】：2011-07-28 06:09:10

【问题描述】：

我在客户端使用原型。

我需要更改页面上的图片而不重新加载。因此，在我的 .js 文件中，我更改了图片的 src，它可以正常工作。但我还需要，如果请求相同的图像，它还会请求服务器知道该图像是否已更改，并在需要时重新加载。服务器发送 last-modified 头，如果得到 if-modified-Since，则检查并发送新图像或 304 Not Modified 响应。

当第一次请求图像时，服务器会回复一个图像。 第二次给出 304 Not Modified。 但是当我尝试重新加载 3-d 时间时，它根本不会触发任何请求。并显示相同的缓存图像。

如果在发送未修改响应之前，它不会请求原型的某些功能。还是其他原因？

有没有办法强制它发出请求？

在 Firefox 和 Chrome 中测试

【参考方案1】：

这是一个常见问题，您需要添加随机更改到图像的额外 id - 这样它会更新内容。

我一直在进行验证码图像验证，它需要将图像更新为它在后端实际完成的操作。在缓存图像之前，会话值会有所不同。

所以在 html 中我添加了一个变量，然后我随机生成一个数字并更改值，因此理论上没有缓存。

Image?a=5291

if static image image.jpg?id=[blah]

您应该能够找到 javascript 随机数生成器并将其添加到任何图像中，并且 id= 可以是您喜欢的任何内容，因为它只是为了欺骗服务器和浏览器缓存。

反正也一直在写图片内容替换

<img id=reli src yourimg.jpg?a=5829>

  //--------------------------------------------------------------------------|
  // Javascript to update image content without reloading page 
  // http://www.pro.org.uk
  // Feel free to re-use leaving this intact 
  // contact me: http://www.pro.org.uk/classified/Directory?act=contact
  //--------------------------------------------------------------------------|
   function ChangeLanguage(lang) 
     langu="1&lang="+lang; 
      if (document.getElementById('reli').src.indexOf("country")>0) 
       document.getElementById('reli').src=document.getElementById('reli').src.substring(0,document.getElementById('reli').src.indexOf("country")-1);
      else if (document.getElementById('reli').src.indexOf("lang")>0) 
       document.getElementById('reli').src=document.getElementById('reli').src.substring(0,document.getElementById('reli').src.indexOf("lang")-1);
     
     document.getElementById('reli').src=document.getElementById('reli').src+langu;
  
  function ChangeCountry(country)
    cc="1&country="+country;
    if (document.getElementById('reli').src.indexOf("lang")>0) 
       document.getElementById('reli').src=document.getElementById('reli').src.substring(0,document.getElementById('reli').src.indexOf("lang")-1);
    
    document.getElementById('reli').src=document.getElementById('reli').src+cc;
  
 

【参考方案2】：

/**
 * Refresh the Image
 * id: id of the Image element to refresh
 * src:URL of the Image Source 
 */
function refreshImage(id,src)

    /* Generating a Random Integer */
    var rnd_int = getRandomInt(1,100000);

    /* Set the Source of the Image plus extra Variable,
    so the Browser will not use the Cache */
    $(id).src= src+'&pictureID='+rnd_int;

    /* Done */
    return;

/**
 * Returns a random integer between min and max
 * Using Math.round() will give you a non-uniform distribution!
 */
function getRandomInt (min, max) 
    return Math.floor(Math.random() * (max - min + 1)) + min;

【讨论】：

请在编写代码时添加cmets，从下次开始，这将有助于未来的观众更好地理解。