文档章节

HTML5新增API学习笔记(二)本地程序缓存

风中一匹哈士奇
 风中一匹哈士奇
发布于 2017/09/07 10:57
字数 506
阅读 21
收藏 1

本地程序缓存

这个我觉得还是比较常用的,在一些页面上,有时因为网络问题啥的,会导致图片加载不出来,空出来一块儿很难看,甚至会页面乱飞,这时候,这个玩意就派上用处了。

这里直接上代码,我用了几张图片做示例,模拟页面中的图片

<h2>应用程序缓存</h2>

<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">

接着重点来了,我们要在开头的html标签中加入mainfest这个属性,

<html lang="en" manifest="demo.appcache">

它里面放的是应用程序缓存清单文件的路径,并且后缀名建议是 .appcache,那怎么创建呢,很简单,直接新建文件就行了,说白了就是个文本文件

那么里面应该写什么呢?

首先第一句,也是必须要写的,就是

CACHE MANIFEST

这是要告诉浏览器,我是谁,你该怎么对待我0.0

下面

CACHE:

这个表示需要缓存的文件的清单列表

NETWORK:

这个表示每次都要从服务器进行重新加载的文件列表

FALLBACK:

这个,嗯,我认为是重点的,也就是解决最开始说的那个问题的东西,配置如果文件无法获取则使用指定的文件进行替代

贴出完整代码:

CACHE MANIFEST

#需要缓存的文件清单列表
CACHE:
#下面就是需要缓存的清单列表
images/1.jpg
images/2.jpg
# *:代表所有文件

#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
images/3.jpg

#配置如果文件无法获取则使用指定的文件进行替代
FALLBACK:
images/4.jpg images/pic1.png
# /:代表所有文件都可以用后面的替换

运行效果

这个还是比较实用的,移动端也表示无压力。

© 著作权归作者所有

共有 人打赏支持
风中一匹哈士奇
粉丝 4
博文 8
码字总数 7492
作品 0
昌平
程序员
Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日)

Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日) 本周Windows 8开发学习资源更新 本周Silverlight学习资源更新 本周Windows Phone开发学习资源更新 本周WPF学习资源推荐 本周...

冷秋寒
06/29
0
0
从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
07/24
0
0
Web前端最全面试宝典- Html篇

HTML 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访...

颜卿今天Coding了吗
2017/03/04
0
0
《HTML+CSS3权威指南》笔记摘要 - 目录

主要是想借助这个平台让大家给我学习途中的错误和不好的地方给与纠正。 我会努力最短时间内完成更新,如果发现有错别字或者Code错误,请指出。 信息:建议使用Opera10以上或者Google浏览器测...

Contac
2011/12/02
0
1
Session, LocalStorage ,Cache-Control

Session 为什么要使用Session? Session的使用? 总结Cookie与Session: Cookie Session LocalStorage localStorage是html5提供的一个API,localStorage的实质是一个哈希 Session是服务器的哈...

code_susu
07/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring MVC 通过@Value注解读取.properties配置内容

第一步: 在applicationContext.xml配置: <bean id="configProperties" class="org.springframework.beans.factory.config.PropertiesFactoryBean"> <property name="locations">......

wangyanbao
8分钟前
1
0
Rancher 2.1全面发布,优化Kubernetes集群运维

GitLab支持、CICD优化、项目配额管理、驱散容器功能等等,Rancher 2.1给你带来一大票惊喜新功能!还有备着【千元大奖】的用户体验计划等你来参与! Rancher 2.1已于近日全面发布! Rancher ...

RancherLabs
14分钟前
1
0
如何优雅的给淘客/京东及拼多多的代理(会员)发工资(佣金)

前段时间有一些做淘客和京东推广的朋友问我能不能开发一个代付系统,这样他们可以用来给代理和网站会员发工资,他们现在还是用的人工手动打款,不仅效率慢,而且还容易出错,我一想,嗯,不难...

千龍
20分钟前
1
0
try-catch-finally

try-catch-finally 一.执行顺序 try-catch-finally 包含的代码块,当 try 里面的代码出现异常的时候,会进入 catch 中,finally 代码块则在最后被执行,即 无论是否出现异常,finally 里面的...

tsmyk0715
25分钟前
2
0
【编程架构实战】——Java并发包基石-AQS详解

目录 1 基本实现原理 1.1 如何使用 1.2 设计思想 2 自定义同步器 2.1 同步器代码实现 2.2 同步器代码测试 3 源码分析 3.1 Node结点 3.2 独占式 3.3 共享式 4 总结   Java并发包(JUC)中提...

java知识分子
26分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部