预加载老生常谈:
funtion preLoadImages(imageArr){ var self = this; var newimages=[], loadedimages=0 var postaction=function(){} //此处增加了一个postaction函数 var imageArr=(typeof imageArr!="object")? [imageArr] : imageArr function imageloadpost(){ loadedimages++; self.resourceLoadedLength++; if (loadedimages==imageArr.length){ postaction(newimages) //加载完成用我们调用postaction函数并将newimages数组做为参数传递进去 } } for (var i=0; i<imageArr.length; i++){ newimages[i]=new Image() newimages[i].src=imageArr[i] newimages[i].onload=function(){ imageloadpost() } newimages[i].onerror=function(){ imageloadpost() } } return { //此处返回一个空白对象的done方法 done:function(f){ postaction=f || postaction } } }, funtion preLoadAudio(audioArr){ var self = this; var newAudio = [], loadedAudios = 0; var postaction=function(){} //此处增加了一个postaction函数 var audioArr = (typeof audioArr !="object")? [audioArr ] : audioArr function audioLoadPost(){ loadedAudios++; console.log(self.resourceLoadedLength); self.resourceLoadedLength++; if (loadedAudios==audioArr.length){ postaction(newAudio) // } } for (var i=0; i<audioArr .length; i++){ newAudio[i]=new Audio(); newAudio[i].src = audioArr[i]; newAudio[i].addEventListener('canplaythrough', ()=>{audioLoadPost()}, false); newAudio[i].addEventListener('error', ()=>{audioLoadPost()}, false); } return { done:function(f){ postaction=f || postaction } } },
//用法: preLoadImages(imageArr).done(()=>{ //加载完成之后的代码 })
但是,ios上的safari不支持提前加载audio,图片是支持的。PC端safari都支持。
还有,为了给用户节约流量,无论PC还是ios,safari都不支持audio(音频)自动播放,所以产生了safari不能自动播放音频的问题,解决方式是:引导用户点击屏幕某块区域,然后播放:
$(document).on('click touchstart','.start-button', function() { $('audio').get(0).load();//ios9 $('audio').get(0).play(); })
如果有多个音频需要自动播放,2个解决方式:
1.多个音频合并成一个,分段播放
2.不断更换用户的点击后触发的那个音频的src
$('audio').get(0) = newSrc; $('audio').get(0).load();//ios9 $('audio').get(0).play();