zoukankan      html  css  js  c++  java
  • 关于图片和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();
    

      

  • 相关阅读:
    站内信设计
    python 发送邮件例子
    mysql 索引相关知识
    一、mysql分表简单介绍
    redis 学习笔记三(队列功能)
    redis 学习笔记二 (简单动态字符串)
    redis 学习笔记一
    docker部署asp.net core
    win10安装docker
    页面格式化后台的传过来的
  • 原文地址:https://www.cnblogs.com/xiaochongchong/p/7762200.html
Copyright © 2011-2022 走看看