Question

我们正在构建一个单页面应用程序（dojo），它将所有内容下载到本地存储和浏览器缓存（IE）。我们正在将JSON文件（数据）推送到本地存储和indexedDB 。所有数据都在Chrome和Firefox中下载，但IE数据部分下载。在IE浏览器中，缓存限制设置为10MB。我们还看到图像被下载到临时文件夹。当我们将缓存和数据库中的允许限制增加到更高的值时，所有数据都被下载。

我们预测问题可能是由于图像被下载到临时文件夹。由于我们不允许增加缓存限制，因为它需要在组织级别进行更改，我们必须在代码中进行管理.how我们可以禁止在html页面中将图像下载到浏览器缓存（临时文件夹）吗？或者还有其他方法可以解决这个问题吗？

Answer 1

为您的图片的每个请求添加一个随机生成的查询字符串。

带有查询字符串的图像示例：

<span id="kotakArt" class="col-lg-3">
                <a id="kotakBarang" href="product-bak-1.html">
                    <img src="img/BAK/Bak_Karet/bakkaret2.jpg">
                    <div id="labelArt">
                        <p><br>
                        Bak Karet
                        <br><br><br>
                        </p>
                    </div>
                </a>
            </span>

这将阻止浏览器在本地缓存图像。

这是一个脚本，用于使用dojo在src上为所有图像添加动态创建的查询字符串。

实例，（请检查dom以查看查询字符串）：

https://jsfiddle.net/haw785rs/

<img src="image.png?8484744" />

require(['dojo/query', 'dojo/dom-attr'], function(query, domAttr) {
  var images = query('img');
  images.forEach(function(item) {
    domAttr.set(item, 'src', item.src + '?' + Date.now());
  });
})

您还可以在服务器端强制执行此行为，确保您的图片随标头一起提供

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Test" height="350" width="150"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Test" height="350" width="150"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Test" height="350" width="150">

（我建议您将服务器方法与动态查询字符串一起使用）。

仅在浏览器（IE）中禁用图像缓存

1 个答案: