如何能html改图片时直接使用本地缓存，完全不走流量(html 或 javascript 解决方案,chrome浏览器)

首先…作为吊丝程序员（学生现役）…给几个吊丝的方法。

预加载隐藏

//在预加载的时候，直接读出隐藏的

$("#blablabla")append($("#someImg")clone());

$("#blablabla")last()attr("sec",$load("url~~~",function(){

    //做一下隐藏

}));

然后在 一直到某点--》之后…就把原来的替换掉。

style的样式…如果还不一样的话……就是自己代码的问题了……

用web Strorage

简单来说…把数据流化并且放入web strorage,然后在读取的时候生产，并且放入img容器。

304状态是必要的

服务器端和客户端使用Conditional Gets功能验证缓存数据

客户端将条目放在缓存里，在过期之后重新验证。服务器端必须实现Conditional GET功能（使用ETags或者last modified的header）。

JS代码：

    $ajax（{

    url: '/Home/ExpiresWithConditional',

    ifModified: true, // 这里是关键

    cache: true,

    success: function （data, status, xhr） {

    $（'#content'）html（datacount）；

    }

    }）；

而让服务端响应304状态是确保在被修改过以后，能够再返回一个不同的值……

所以……

流量还是不要省了……→_→

cache的路径和容量在浏览器设置的，和html无关，html最多请求要不要缓存

cache-control：||no-cache||no-store||max-age

1no-cache：

表面意为“数据内容不被缓存”，而实际数据是被缓存到本地的，只是每次请求时候直接绕过缓存这一环节直接向服务器请求最新资源，由于浏览器解释不一样，

例如ie中我们设置了no-cache之后，请求虽然不会直接使用缓存，但是还会用缓存数据与服务器数据进行一致性检测(也就是说还是有几率会用到缓存的),

firefox中则完全无视no-cache存在，详细解释见no-store;

2no-store：

指示缓存不存储此次请求的响应部分。与no-cache比较来说，一个是不用缓存，一个是不存储缓存;按理来说这个设置更加粗暴直接禁用缓存，

但是具体实现起来 浏览器之间差异却特别大，一般不会直接用该字段进行设置，不过no-store是为了防止缓存被恶意修改存储路径导致信息被泄露而设置的，

毕竟有它的用处，在firefox中实现缓存是通过文件另存为将缓存副本保存到本地，直接利用no-cache对其是无效的，如果加上no-store设置的话 则可以起到与no-cache一样的效果;

即：cache-control:no-cache,no-store;可以确保在支持>

方法1 将下载到本地，缺点是保存时会d出文件保存提示框，需要用户配合

方法2 将存到localStorage，用户无感知，缺点是最多存5MB

不知道楼主什么场景浏览器无法自动缓存资源。手动缓存是个很不常规的手段

一个简单的例子

比如访问新闻页面，如果不使用该方法，那每个用户访问的时候，都要去查询数据库。而如果使用该策略，在服务器端先生成一个静态的html文件，那用户访问的时候就不需要查询数据库了。

至于更新，可以有服务器定时去查询数据库重新生成html文件。

纯属个人想法。。

html5离线存储缓存列表可以动态生成

最简单来说，一个离线网络应用程序就是一个URL的列表——HTML，CSS，JavaScript，，或者其他类型的资源。离线网络应用程序的主要指向一个叫做名单文件并用于定位网络服务器上的资源列表。用于执行HTML5离线以用程序的网络浏览器将从名单文件中读取URL列表，下载这些资源，将他们在本地缓存，并自动在这些本地副本改变时保持他们更新。当你尝试在没有网络连接时访问网络应用程序，你的网络浏览器将自动切换并使用本地代替。

最新的主流的浏览器中都已添加了对HTML5的offlineStorage功能的支持，HTML5离线存储功能非常强大，它的作用是：在用户没有与因特网连接时，照样可以访问站点或应用，在用户与因特网连接时，自动更新缓存数据，是我们的网站的适应性和应用型更强！

例如一些在线游戏的某些文件可以使用离线存储缓存到本地，这样就不用每次刷新页面都要下载了。对于传统的浏览器缓存是无法控制的，浏览器有自己的缓存规则，我们无法实现缓存什么不缓存什么。但是使用离线存储可以缓存任何内容，包括可以自定义哪些可以被缓存，哪些必须联网才能访问。

离线存储所保存的不是应用中的某些数据，而是站点的某个些文件的副本，即html页面或等，而不是仅仅存储一段json或xml。

以上就是关于如何能html改图片时直接使用本地缓存，完全不走流量(html 或 javascript 解决方案,chrome浏览器)全部的内容，包括:如何能html改图片时直接使用本地缓存，完全不走流量(html 或 javascript 解决方案,chrome浏览器)、如何设置html的cache的路径和容量、html图片缓存问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！