页面js和图片缓存处理办法

于 2022-01-26 10:01:48 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： 缓存 微信 公众号 文章标签： 缓存 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42313445/article/details/122696328
版权
微信 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
缓存
2 篇文章 0 订阅
订阅专栏
公众号
2 篇文章 0 订阅
订阅专栏

页面js和图片缓存处理办法

在链接后加上版本号，在替换js的时候可以自动替换掉

如果一致需要刷新，可以将版本号替换成时间戳，此时浏览器的每一次请求在浏览器的策略看来都是新的请求，不会走浏览器本地的缓存策略

  • 示例
//html
http://xxx.com/index.html?t=123xxx

//图片
http://xxx.com/test.jpg?t=123xxx

//js
http://xxx.com/test.js?v=123xxx
  • 注意点

时间戳可能带来的问题，页面缓存可能会积压在了用户端，虽然刷新时会走新的链接，但是之前的可能的页面可能会被浏览器的缓存策略记录保存

STR少寒
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现图片延迟加载(缓冲)，非常实用
02-25
JS实现图片延迟加载(缓冲)，非常实用.注意：页面上如果有滑动门等元素，可能显示不全。因情况需要调一下。总体来说不错！
前端(js)实现图片缓存的方法
Xiaoze的博客
12-21 8605
当我们想遍历图片展示时，如果图片加载缓慢会造成图片一张张加载十分不美观，有些图片由于没有加载成功还会会显示失败，如果等程序要用到时再从远程服务器下载的话可能来不及，对用户体验来讲影响很大。所以可以先将图片缓存，需要时直接使用即可。 //需要预加载的图片路径存放在数组里 var imgsrc=[ "1.jpg", "2.jpg", "3.jpg" ]; //初始化image对象 var img = new Image(); //遍历数组的路径，预加载到客户端 for (var i =
js的图像缓存技术
salonzhou的专栏
10-30 1098
图像缓存就是先把图像加载到内存里 如： var image = new Image(200,200); //创建一个200大小的图像区 image.src = "images/a0.jpg"; //把图片放到内存区。 当用到的时候： document.images[0].src=image.src; 引用：http://blo
JS缓存图片实例
iteye_582的博客
01-10 87
转自：http://www.cnblogs.com/cbcye/archive/2011/02/22/1961418.html   JS缓存图片实例 现有JS功能越来强大了，很多基于JS的Web Game做得都非常好。但JS程序不像客户端程序，很多程序里需要使用到的图片、资源等都要从远程服务器获取。因此如果等程序要用到时再从远程服务器下载的话可能来不及。对用户体验来讲影响很大。因...
超强的IE背景图片闪烁(抖动)的解决办法
10-30
在IE浏览器中，为了提高网页的加载速度和减少服务器的压力，浏览器会缓存页面中的图片资源。然而，在某些情况下，比如页面刷新、图片源改变等，浏览器会重新加载这些图片资源。由于IE浏览器的特性，这个过程可能导致...
清除css、javascript及背景图在浏览器中缓存的简单方法
09-22
它允许浏览器保存常访问的资源，如CSS样式表、JavaScript脚本和图片，以减少网络请求，加快页面加载速度。然而，这种机制在更新网站内容时可能会带来问题，因为用户可能仍然访问的是旧的缓存版本，导致新功能或样式...
IIS环境下关于发布网页内容访问慢的处理办法——静态页后提升flash等多媒体文件的优化方法.docx
07-29
### IIS环境下发布网页内容访问慢的处理办法 #### 一、问题背景及原因分析 在IIS（Internet Information Services）环境下部署站点时，经常会出现网页加载速度缓慢的问题，特别是当网页中含有大量的静态资源（如...
Application Cache未缓存文件无法访问无法加载问题
09-28
1. **CACHE**：在这个部分，开发者列出希望浏览器缓存的所有文件，包括HTML、CSS、JavaScript、图片等。一旦浏览器加载了清单中的文件，它们就会被存储在本地，可以在离线状态下使用。 2. **NETWORK**：这部分用于...
静态文件访问不到报No Access-Control-Allow-Origin处理办法
06-11
这个问题在使用静态文件（如字体文件.eot, .ttf, .woff等）时尤为常见，因为这些文件经常需要跨域加载以实现网页的样式和布局。 解决这个问题的一种方法是通过配置Web服务器，比如Nginx，来添加`Access-Control-...
利用JS实现图片的缓存
weixin_34242658的博客
06-25 827
web页面使用HTML的<img>元素来嵌入图片，和所有HTML元素一样，<img>元素也是可以通过脚本来操控的(设置元素的src属性，将其指向一个新的URL会导致浏览器载入并展示一张新的图片)。为了让图片缓存起来，客户端JS定义了一个API，首先利用Image()构造函数来创建一个屏幕外图片对象，之后将该对象的src属性设置 期望的URL，由于图片元素并没有添加到文档中，...
H5页面，js，图片等缓存造成问题解决
四月
02-18 3760
H5页面，js，图片等缓存造成问题解决 多方面查询，有几个方案 方案一：不能完全解决问题，js和图片还是会有缓存 &lt;HEAD&gt; &lt;META    HTTP-EQUIV="Pragma" CONTENT="no-cache"&gt; &lt;META    HTTP-EQUIV="Cache-Control" CONTENT="no-cache"&gt;
JS网页图片地址刷新解决缓存问题
黄-小智的博客
09-08 1574
问题：由于图片src地址没有变化，会导致浏览器误以为同样的图片，就缓存中读取缓存下来的图片地址导致无法刷新得到想要的结果 方式：改变图片src地址即可，也就是在图片地址后添加一个随机数作为参数，该参数实质上也是没有意义的 代码示例： ......
HTML+JS实现浏览器下载图片 （可以下载第三方链接的图片）
岁末zzz的博客
05-17 3254
如果使用a标签指向一个图片的话，你会发现点击链接时它会直接在浏览器中打开图片并显示: <a href="http://www.baidu.com/img/baidu_jgylogo3.gif" /> 但是这样的话，就存在一个问题，如果我想点击a链接直接下载图片到本地，该怎么实现呢？ 在查阅资料之后，发现a标签有一个download的属性，添加了该属性，a标签将直接下载文件，并根据do...
js——浏览器缓存（http缓存）和本地存储
leilei7407的博客
06-19 3874
http缓存链接 事先代码准备： 创建一个http服务 在集成终端中，输入node app.js启动服务 此时，在浏览器中输入localhost:3000，结果如下 新建一个test1.html页面，内容如下 现在希望服务器能将这个页面发送过来，所以修改app.js内容 此时，在浏览器中输入localhost:3000后，结果如下，可以看出，此时显示的就是index.html页面 基于上面的内容，开始讲解强制缓存和协商缓存 index.html内容如下 此时，如果不修改ap.
Js FileReader图片加载，预处理本地缓存图片
qq_43305958的博客
08-31 843
Js FileReader图片加载一、FileReader是什么？二、使用步骤总结 FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。 一、FileReader是什么？ FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。 二、使用步骤 //获取文件名字的后缀名 const prefix = img.name.split('.')[1] if (prefix !== 'jpg' && prefix !
js html 图片 缓存问题,如何防止浏览器缓存CACHE？将CSS、JS、图片加上参数
weixin_39781945的博客
06-04 629
什么是浏览器缓存浏览器缓存功能是网页性能优化的项目之一使用浏览器缓存功能如果用户再次来到您的网站，缓存css、js、jpg、png图档等静态资源将能使网页打开速度加快，同时也能减少服务器负担。更多关于浏览器缓存功能可参考google说明文档https://developers.google.com/speed/docs/insights/LeverageBrowse...
js 取已经缓存的图片
最新发布
09-22
在JavaScript中，我们可以使用一些方法来获取已经缓存的图片。 一种常见的方法是使用Image对象的complete属性来检查图片是否已经加载完成。当图片加载完成后，complete属性的值将变为true。因此，我们可以通过判断这个属性的值来确定图片是否已经被缓存。以下是一个例子： ```javascript var img = new Image(); img.src = 'path/to/image.jpg'; if (img.complete) { // 图片已经被缓存 console.log('图片已经被缓存'); } else { // 图片还未被缓存 console.log('图片还未被缓存'); } ``` 另一种方法是使用浏览器的缓存机制来判断图片是否已被缓存。浏览器会将已加载的图片存储在缓存中，如果需要再次加载相同的图片，浏览器将直接从缓存中获取，而不会重新下载。因此，我们可以通过使用相同的图片路径来尝试再次加载图片，如果加载成功，则说明图片已经被缓存。以下是一个例子： ```javascript var img = new Image(); img.onload = function() { // 图片已经被缓存 console.log('图片已经被缓存'); }; img.onerror = function() { // 图片还未被缓存 console.log('图片还未被缓存'); }; img.src = 'path/to/image.jpg'; ``` 需要注意的是，以上两种方法都有一定的局限性。因为浏览器的缓存机制是自动的，我们无法控制何时何地缓存图片。另外，不同的浏览器可能对缓存的处理方式也有所差异。因此，在实际应用中，可能需要根据具体需求来选择合适的方法来判断图片是否已被缓存。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值