HMLT5离线缓存
关于HMLT5离线缓存的痛，痛经有多痛就有多痛（hybrid应用加载）
一、先看下脑图
二、前面一篇文章简单的说了下manifest文件的缓存。
前面的文章能解决问题，但是带来了更多的致命问题，最后想到这个办法。
也碰到了一些关于HTML加载执行的问题，主要是页面和JS执行的顺序问题。
关于源码暂时还没整理出来~~有需要了解的可以找我交流~~~
(
function
(window, undefined) {
//资源请求
function
loadResource(resources, callback) {
if
(Object.prototype.toString.call(resources) !==
"[object Array]"
){
return
;}
var
index = 0,cacheStr=
''
,errorCache=
false
;
(
function
_load(ary) {
var
opt = ary.shift();
if
(!opt) {
localStorage.cacheStrJs=cacheStr;
if
(!errorCache){
localStorage.versioning=versioning;
"function"
==
typeof
callback && callback();
}
else
{
//资源文件请求异常进行二次请求，直到全部缓存资源成功才结束
loadResource([
{path:
'css/index.css'
,sName:
'index'
},
{path:
'js/utils.js'
,sName:
'utils'
},
{path:
'js/keycode.js'
,sName:
'keycode'
},
{path:
'js/videoplay.js'
,sName:
'videoplay'
},
{path:
'js/initial.js'
,sName:
'initial'
},
{path:
'js/keyevent.js'
,sName:
'keyevent'
},
{path:
'js/uianimate.js'
,sName:
'uianimate'
},
{path:
'js/videoapp.js'
,sName:
'videoapp'
}
],
function
() {
cache();
console.log(
"二次加载完成完成完成!"
);
});
}
}
try
{
var
url;
if
(index<8){
url=opt.path+
'?v='
+versioning;
}
else
{
url=opt.path;
}
$.ajax({
url : url,
type :
"GET"
,
dataType:
'text'
,
success :
function
(data) {
if
(index<8){
if
(index==0){
localStorage[opt.sName]=data;
}
else
{
cacheStr+=data;
}
}
index++;
_load(ary);
},
error :
function
() {
index++;
if
(index<8){
errorCache=
true
;
_load(ary);
}
}
});
}
catch
(e){
}
})(resources);
};
loadResource([
{path:
'css/index.css'
,sName:
'index'
},
{path:
'js/utils.js'
,sName:
'utils'
},
{path:
'js/keycode.js'
,sName:
'keycode'
},
{path:
'js/videoplay.js'
,sName:
'videoplay'
},
{path:
'js/initial.js'
,sName:
'initial'
},
{path:
'js/keyevent.js'
,sName:
'keyevent'
},
{path:
'js/uianimate.js'
,sName:
'uianimate'
},
{path:
'js/videoapp.js'
,sName:
'videoapp'
},
{path:
'images/iocl.png'
},
{path:
'images/ico.png'
},
{path:
'images/other.png'
},
{path:
'images/ylowbg.png'
},
{path:
'images/tvb.png'
},
{path:
'images/zyi.png'
},
{path:
'images/comic.png'
},
{path:
'images/child.png'
},
{path:
'images/movie.png'
},
{path:
'images/serch.png'
},
{path:
'images/moive.png'
},
{path:
'images/history.png'
},
{path:
'images/tv.png'
},
{path:
'images/zy.png'
},
{path:
'images/video.png'
},
{path:
'images/indxbg.jpg'
},
{path:
'images/movdet.jpg'
},
{path:
'images/tvdet.jpg'
},
{path:
'images/zydet.jpg'
},
{path:
'images/hotdef.png'
},
{path:
'images/kidsdet.jpg'
},
{path:
'images/comicdet.jpg'
},
{path:
'images/fao.jpg'
},
{path:
'images/his.jpg'
},
{path:
'images/favdet.jpg'
},
{path:
'images/hisdet.jpg'
},
],
function
() {
cache();
console.log(
"加载完成完成完成!"
);
});
})(window);
|
分类:
HTML5
标签:
HTML5 离线缓存