图片预加载

实际实现方式很简单，主要用到图片的onload事件，当一个图片加载完成后，会触发onload事件，我们可以在onload中计算已经加载的图片数量和总图片数量的比值，从而得到加载进度

//imageList：要加载的图片数组
//callback：图片onload事件的回调
//timeout：如果超过一定时间，强制加载完成，避免一直等待
function preLoad(imageList,callback,timeout){
    timeout=timeout||5000;

    let loaded=0;
    let total=imageList.length;

    for(let i=0;i<total;i++){
        let img=new  Image();
        img.src=imageList[i]
        img.onload=img.onerror =function(){
            loaded++;
            callback(loaded/total);
        }
    }

    setTimeout(function(){
        if(loaded<total){
            loaded=total;
            callback(loaded/total);
        }

    },timeout)
}

var imageList=[
    'img/banner01.jpg',
    'img/banner02.jpg',
    'img/erweima.jpg',
    'img/gif.jpg'
]

var callback=function(percent){
    console.log(percent)
}

preLoad(imageList,callback)

音乐预加载

音乐的加载我们不能像图片那样实现，可以通过设置audio的proload属性来实现

<audio preload="load" />

属性值描述规定是否预加载音频。可能的 load 值：
auto – 当页面加载后载入整个音频
meta – 当页面加载后只载入元数据
none – 当页面加载后不载入音频

预先加载音频
在实际的开发中，一种对音频很好的处理方法是对其进行预先加载，这样可以提高页面的加载速度，HTML5的标签提供了preload属性，并有三种值可供选择：

· “none”: 这个值指的是用户不需要对音频进行预先加载，这样可以减少网络流量，一个典型的情景是如果是一个具备播客功能的语音播客中，每一篇文章其实都有音频，但只有当用户确认打开这些音频收听时，才通过网络进行加载。否则，试想一下，这么多数量的音频同时进行预加载，速度是相当慢的。

· “metadata”: 这个选项的值将告诉服务端，用户依然不想马上加载音频，但需要预先获得音频的元数据信息(比如文件的大小，时长等)。如果开发者是在设计音频播放器或者需要获得音频的信息而不需要马上播放视频，则可以使用这个选项。

· “auto”:这个选项告诉服务端，用户需要马上加载音频并进行流式播放，这在比如一些游戏场景等需要实时音频的场景中会用到。

要注意的是，如果在使用audio标签时中当设置音频的src值的时候，默认采用的设置值是将preload的加载属性设置为auto的，因此如果需要另外设置加载的属性值，需要在设置src前进行设置(经测试不一定)。

preload 属性规定是否在页面加载后载入音频。
如果设置了 autoplay 属性，则忽略该属性。

分享到