关于图片和auido预加载

预加载老生常谈:

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();

  

原文地址:https://www.cnblogs.com/xiaochongchong/p/7762200.html