关于浏览器图片缓存问题

最新推荐文章于 2025-06-13 16:18:15 发布
最新推荐文章于 2025-06-13 16:18:15 发布
阅读量3.8k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： JAVASCRIPT 文章标签： 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ichsonx/article/details/4157845

这个问题也听麻烦的.不是用什么no-cache就能简单解决.

 

后来在网上找到了一个方法.就是在img的scr属性.后添加  "?tempid="+Math.random(); 这样一段字符串.

 

想来是因为浏览器缓存的img是根据scr属性的.而这个刚好随即生成随机数,不影响SCR属性的同时等于更新了src属性..因此避免了缓存.

 

当然scr属性后添加,是在完整的图片地址后在加上以上那段代码;

浏览器缓存问题处理
01-08
本文将详细讲解浏览器缓存的工作原理，以及如何处理浏览器缓存问题。 首先，我们需要理解HTTP请求的基本流程。在TCP三次握手建立连接后，客户端通过HTTP请求获取服务器上的资源。浏览器会根据HTTP响应头中的Cache-...
浏览器缓存机制介绍与缓存策略剖析.pptx
05-27
Memory Cache 是浏览器在内存中存储的缓存，主要包含当前页面中已经下载的资源，如样式、脚本、图片等。 Memory Cache 的读取速度非常快，但缓存的持续性很短，一旦关闭 Tab 页面，内存中的缓存也就被释放了。在决定...
浏览器缓存原理总结
java面试笔试
03-08 1297
一、浏览器缓存基本认识分为强缓存和协商缓存1、浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中...
浏览器缓存图片
Crazy博客
04-28 1949
今天发现一个特奇葩的问题，每次访问新的二维码图片时，浏览器上显示的都是旧的二维码，浏览器做了多余的操作，在图片访问地址不变时，会将缓存中的图片显示出来，来提升访问速度，但是我们的不需要改操作。 解决办法： 在请求图片时，添加一个随机数，地址的改变，浏览器就不会使用缓存的图片了。 localhost:5000/static/images/login.jpg?+随机数 ...
缓存图片查看器：深入探索和管理隐藏的图片资源
weixin_33375360的博客
06-13 901
piccache.ini是piccache.exe程序的核心配置文件，通过该文件的配置，用户可以对程序的行为进行细致的定制。了解该文件的结构和功能对于实现图片缓存管理的高级功能至关重要。在本章节中，我们探讨了提升浏览体验与数据安全的管理技巧。通过个性化设置和美化用户界面，用户可以获得更加舒适的浏览体验。同时，我们还着重讨论了数据备份、同步与分享过程中的安全策略。最后，我们展望了图片缓存查看器未来可能的发展方向和产品迭代计划。
浏览器缓存的这些知识点你都清楚吗？
cpongo011702
04-08 216
作者：Apocalypsa一、浏览器缓存基本认识分为强缓存和协商缓存1、浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器。2、当强缓存没...
设置图片缓存
weixin_30834019的博客
06-24 463
WordPress博客里大量的图片会使页面加载速度变得缓慢。此时访问者需要用更多时间才能打开一个页面。不过我们可以通过缓存图片来解决这个问题。当页面第一次被加载时，将所有图片存放在浏览器的缓存池里。之后访问者再加载该页面时，浏览器就可以从浏览器缓存中获取图片，从而减少页面加载时间。对Apache服务器上的WordPress博客/网站，可以通过编辑根目录下的.htaccess文件来激活图片缓...
js清除浏览器缓存的几种方法
12-08
浏览器缓存是网页加载速度的关键因素，它存储了用户访问过的网页资源，如HTML、CSS、JavaScript文件和图片，以减少再次访问时的加载时间。然而，在某些情况下，如股票实时更新网站，缓存可能会导致数据不准确，这...
Adnroid 微信内置浏览器清除缓存
10-21
然而，对于开发者和普通用户而言，微信内置浏览器缓存机制可能导致难以更新网页内容的问题。尤其是在Android系统上，这一问题尤为突出，因为微信并没有提供直接清除缓存的选项。iOS系统中的微信则允许用户通过特定...
js、css、img等浏览器缓存问题的2种解决方案
10-26
然而，随着前端技术的发展，JavaScript、CSS、图片等静态资源经常需要更新，此时，浏览器缓存就有可能成为一个问题。本文将探讨两种常见的解决浏览器缓存问题的方法。 方法一：生成随机数字 该方法通过在资源文件...
chrome浏览器缓存提取工具
05-25
想要从chrome浏览器的缓存里提取视频、图片再也不用从很长的路径中寻找了，其实路径中找到的也不是直接可以用的文件。
缓存技术研究01---浏览器缓存技术
java-t-go
09-27 162
前提说明： 缓存技术在在网站应用中非常重要，在减少服务器请求压力和用户浏览速度加块方面有着功不可没的功劳， 昨天在我《网站优化--让你的网页飞起来》里面有人问道关于浏览器缓存原理的问题，萌发了我研究缓存技术的兴趣，本文主要 介绍浏览器的缓存原理。 正文： 缓存技术： 在介绍缓存技术之前，我们先看一张LAMP网站的价格图，通过架构图我们可以很清晰的对网...
浏览器缓存img
m0_57974411的博客
08-04 305
浏览器缓存img
解决浏览器图片缓存问题
Ray
12-28 5598
问题： 项目中有生成二维码，每次操作后生成新的二维码图片，地址不变，但是在浏览器中总是显示前几次生成的二维码，实际上新的二维码已重新生成，只是浏览器把图片缓存了所以一直都是第一次读取时的二维码。 解决方案： 可以在图片后加一个随机数，数字无意义，也不会产生影响，可以解决浏览器的缓存问题。 eg： 原地址：“/images/imgname.jpg"; 修改为："/images/imgna
对抗浏览器缓存（浏览器自动从缓存里读图片时怎么 办）
张航的博客
09-02 1952
用jfreechart生成统计图，可是在页面每次都读到缓存中的旧图，而不是我想要的最新生成的 网上找到大多数数 设置页面 meta ，还是没有效果。 最终解决方案： ?${ times }" /> 在图片地址后加上一个参数（随机数，每次请求新地址自然不会从缓存
处理浏览器缓存图片,只请求一次
油墨香^-^的博客
07-20 578
设置浏览器对某图片不缓存，只需在此图片返回的响应头中设置如下字段。//设置浏览器不缓存此图片。
浏览器缓存
zhang_zan
05-11 1245
浏览器缓存
浏览器缓存机制
程序媛的博客
01-11 2938
浏览器缓存问题，知识点
springmvc浏览器图片缓存
最新发布
08-02
### 问题分析 在 Spring MVC 项目中，图片加载缓慢的主要原因通常与浏览器缓存机制有关。如果浏览器没有正确缓存图片资源，每次访问页面时都会重新从服务器下载图片，从而导致性能下降。此外，如果图片是从数据库中以二进制流的形式读取，这种操作本身就比直接读取本地文件系统要慢得多。 为了解决这一问题，可以通过以下方式优化图片的加载和缓存： --- ### 解决方案 #### 1. 配置静态资源缓存 在 Spring MVC 中，可以通过配置 `ResourceHttpRequestHandler` 来设置静态资源的缓存头信息，例如 `Cache-Control` 和 `Expires`。这样可以控制浏览器如何缓存图片资源。 在 Java 配置类中实现 `WebMvcConfigurer` 接口，并重写 `addResourceHandlers` 方法： ```java @Configuration @EnableWebMvc @ComponentScan(basePackages = "com.example") public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/resources/**") .addResourceLocations("/WEB-INF/resources/") .setCacheControl(CacheControl.maxAge(365, TimeUnit.DAYS).cachePublic()); } } ``` 通过设置 `Cache-Control: public, max-age=31536000`（对应 365 天），可以告诉浏览器缓存图片资源，从而减少重复请求。 #### 2. 将图片存储在本地文件系统 如果图片存储在数据库中，每次加载都需要进行数据库查询和流式传输，效率较低。为了提升性能，建议将图片存储在服务器的本地文件系统中，并通过 URL 直接访问这些文件。例如： ```java @GetMapping("/image/{imageName}") public ResponseEntity<Resource> serveImage(@PathVariable String imageName) { Path imagePath = Paths.get("path/to/images", imageName); Resource resource = new UrlResource(imagePath.toUri()); if (resource.exists() || resource.isReadable()) { return ResponseEntity.ok() .header(HttpHeaders.CONTENT_TYPE, MediaType.IMAGE_JPEG_VALUE) .header(HttpHeaders.CACHE_CONTROL, "max-age=31536000, public") .body(resource); } else { throw new RuntimeException("Image not found"); } } ``` 该方法通过 `UrlResource` 读取本地文件，并设置缓存头以优化浏览器缓存行为。 #### 3. 使用 CDN 缓存图片资源 对于大规模访问的场景，可以将图片上传到内容分发网络（CDN），例如阿里云 OSS、AWS S3 等。CDN 能够将图片缓存到离用户最近的边缘节点，从而大幅提升加载速度。 #### 4. 图片压缩与懒加载 除了缓存优化，还可以通过以下方式进一步提升图片加载性能： - **图片压缩**：在服务器端对图片进行压缩，减少传输数据量。 - **懒加载（Lazy Load）**：使用 JavaScript 实现图片懒加载，即图片在滚动到可视区域时才开始加载。 --- ### 示例代码 以下是一个完整的图片加载控制器示例，包含缓存控制和本地文件访问： ```java @RestController public class ImageController { private final Path imagePath = Paths.get("path/to/images"); @GetMapping("/images/{filename:.+}") public ResponseEntity<Resource> getImage(@PathVariable String filename) { try { Resource resource = new UrlResource(imagePath.resolve(filename).toUri()); if (resource.exists() || resource.isReadable()) { return ResponseEntity.ok() .header(HttpHeaders.CONTENT_TYPE, MediaType.IMAGE_JPEG_VALUE) .header(HttpHeaders.CACHE_CONTROL, "max-age=31536000, public") .body(resource); } else { throw new RuntimeException("Image not found"); } } catch (MalformedURLException e) { throw new RuntimeException("Error retrieving image"); } } } ``` --- ### 总结 通过配置静态资源缓存、将图片存储在本地文件系统、使用 CDN 以及结合懒加载技术，可以有效解决 Spring MVC 中的图片缓存问题，从而提升页面加载速度和用户体验[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值