js所有文件加载完后再开放页面+ajax获取本地文件提示跨域

 

一般做移动端动画类的页面（也称H5）的时候，我们会用到大量的图片，还很有可能会有背景音乐甚至视频，如果网速不好或者文件过多过大，就会出现问题，这种情况下我们就可以使用js代码，达到文件全部加载完再展示正式页面的效果。

那么在实际项目中，我们肯定免不了用背景图片的情况（如果有全部用img标签做的大神，勿喷），那么怎么保证我们的每一个静态文件都参与到我们的loading文件数中呢？

我们需要单独写一个json的文件来解决我们的问题，例如：

这里插播一条知识点，我的json文件为什么会用staticDatas包起来呢？这就涉及到浏览器跨域问题了，我的项目是在本地写的，所以直接get json文件，在Chrome浏览器下面会报跨域问题，所以我这边采用手动jsonp来解决。那么这种文件怎么用呢？

没错，只需要在html里，紧贴着body结尾标签，请注意，是紧贴着结尾标签，引入你的json文件，并且在后面加上?cb=json文件中包着json数据的变量名，这也跟jsonp的逻辑是一样的，在我的理解中相当于双方规定好了一种通信暗号，对上暗号就是安全的，对不上就还是会跨域

<script src="static/js/static.json?cb=staticDatas"></script>

那么这种的怎么用呢，直接在你的js文件里这样做就可以了：

function staticDatas(res) {
    console.log(res.data)
}

好了，回归主题，上加载文件列表的代码：

function loadResources(files, index) {
    function loadSuccess() {
        var loadNum = Math.floor((index + 1) / files.length * 100);
        $('.loading-txt').text(loadNum + '%');
        if (index < files.length - 1) {
            loadResources(files, (index + 1));
        } else if (index == files.length - 1) {
            var hideLoading = setTimeout(function() {
                $('.loading').fadeOut(100);
                //初始化完成，开始你的业务代码
                clearTimeout(hideLoading);
            }, 300);
        }
    }
    switch (files[index].type) {
        case 'image':
            var img = new Image();
            img.src = files[index].path;
            img.onload = function() {
                loadSuccess();
            }
            img.onerror = function() {
                alert('文件' + files[index] + '加载失败');
            };
            break;
        case 'audio':
            var audio = new Audio();
            audio.src = files[index].path;
            audio.onloadedmetadata = function() {
                loadSuccess();
            };
            audio.onerror = function() {
                alert('文件' + files[index] + '加载失败');
            }
            break;    
        //如果有其他类型的文件，可以继续case
    }
}

代码应该很清晰，不需要什么多余的注释，如果不清楚的可以给我留言。

封装好方法后这样调用：

function staticDatas(res) {
    var index = 0;
    loadResources(res.data, index)
}

要注意，调用一定要在window.onload()之前调用