文档章节

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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

shell-日志脚本小实验

1.查找日志2018-8-15,求得那一分钟访问量最大。 #/bin/bash#from cc#2018-8-15#2018-08-15.log 哪一分钟 访问量 最大for d in `ls /data/nginx/logs/`doif [ -a 2018-08-15...

chencheng-linux
昨天
0
0
Android中的设计模式之状态模式

参考 《设计模式:可复用面向对象软件的基础 》5.8 State 状态 对象行为型模式 《Android源码设计模式解析与实战》第7章 随遇而安--状态模式 意图 允许一个对象在其内部状态改变时改变它的行...

newtrek
昨天
0
0
xshell端 vim没有颜色

说明 使用xshell连接服务器的时候,使用vim打开文档没有颜色 解决方法: 1.在更目录home或者etc下找到vim的配置文件vimrc 2.vim打开它找个坑,添加下面这个东西 set t_Co=256 3.保存退出,就...

杉下
昨天
0
0
spring 资料

spring boot http://www.ityouknow.com/springboot/2016/01/06/spring-boot-quick-start.html

zaolonglei
昨天
2
0
TypeScript基础入门 - 函数 - 简介

转载 TypeScript基础入门 - 函数 - 简介 项目实践仓库 https://github.com/durban89/typescript_demo.gittag: 1.1.6 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接...

durban
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部