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 离线缓存