• 关于图片和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();
    

      

  • 相关阅读:
    spring boot 中@Mapper和@Repository的区别
    yarn和npm的对比以及yarn的使用
    vue环境搭建
    小白的springboot之路(六)、跨域解决方案CORS
    DWR3.0框架入门(1) —— 实现ajax
    DWR3.0框架入门(3) —— ScriptSession的维护及优化
    DWR3.0框架入门(2) —— DWR的服务器推送
    Freemarker入门案例
    dom4j生成和解析xml文件
    struts2拦截器-自定义拦截器,放行某些方法(web.xml配置)
  • 原文地址:https://www.cnblogs.com/xiaochongchong/p/7762200.html
Copyright © 2020-2023  润新知