做h5/web app经常需要做资源预加载，一种是利用H5的manifest的离线存储实现缓存功能，是非定向的，一种是利用js/css来做定向的资源预加载~

JS的话，经常会用img的src来做文章，写一个简单地图片资源预加载：

首先定义一个资源组件的格式，这样有N多组件的时候，方便统一维护： 

component1 = {
    'source': {
        'type': 'img',
        'url': ['/static/img/common/loader.gif']
    }
}

现在我们简单设置type为img来做为资源类型，然后url是一个数组~这个数组可以是js动态生成、获取的~

然后就是写一个preloader，需要处理onload的逻辑（但是api没有暴露出去cb找个参数）~

然后_loader是一个字典，按照类型不同（比如本实例是img），可以挂载不同的处理函数，比较灵活，还可以将这个_loader对象暴露出去封装一个api，让调用者可以修改添加_loader，这样可以自己添加不同类型的资源预加载处理方式。

然后再做一个listify函数，能实现multi传参~这样调用preload会比较灵活简单~

完整代码：

/**
 * Prelaod Source
 */


let _loader = {

    img (url, cb) {
        let img = new Image()
        img.src = url

        if (img.complete) {
            if(cb) cb(img)
        }else {
            img.onload = function () {
                if(cb) cb(img)
                img.onload = null
            }
        }

    }
}


//实现multi传参调用

function _listfy(_fn){
    return function(...args){
        let listParams = [].concat(args),
            len = listParams.length

        // console.log(listParams)

        for(let i=0;i<len;i++){
            _fn(listParams[i])
        }

    }
}


function _preload(component) {
    if(component.source && 
        component.source.type && 
        component.source.url){

        setTimeout(()=>{
            _listfy(_loader[component.source.type])(...component.source.url)
        }, 500)
         
    }
}


let preload = _listfy(_preload)


export {
    preload
}

调用preload:

let c1 = {
    'source': {
        'type': 'img',
        'url': ['/static/img/common/loader.gif']
    }
}
let c2, c3 ....

preload(c1,c2, c3,...)
preload([c1, c2, c3])