2. /**
    3.  * @description 图片base64加载
    4.  * @author lizhouquan
    5.  */
    8. bds.base64 = (function () {
    9.     //获取base64前置参数
    10.     var _opt = bds._base64;
    12.     //内部数据;
    13.     var _containerAllId = "container",
    14.         _containerLeftId = "content_left",
    15.         _containerRightId = "content_right",
    16.         _BOTTAGLSNAME = "BASE64_BOTTAG",
    17.         _domain = bds._base64.domain,   //base64图片服务域名
    18.         _imgWatch = [],             //图片加载观察list，如果没有onload，进行容错
    19.         _domLoaded = [],            //标识对应dom是否已下载
    20.         _data = [],                 //暂存请求回调数据
    21.         _dataLoaded = [],        //数据是否返回
    22.         _finish = [],            //是否已完成渲染
    23.         _hasSpImg = false,          //是否有左侧模板sp_img走base64加载
    24.         _expGroup = 0,              //左侧实验组
    25.         _reqTime = 0,              //请求开始时间
    26.         _reqEnd = 0,               //请求返回时间 - 右侧
    27.         _reqEndL = 0,               //请求返回时间 - 左侧
    28.         _rsst = 0,                  //请求开始时间 - 测速
    29.         _rest = 0,                   //请求返回时间 - 测速
    30.         _dt = 1,                   //domain类型
    31.         _loadState = {},           //记录imglist的状态
    32.         _hasPreload = 0,           //记录页面是否开启preload
    33.         _ispdc = false;            //是否开启了性能统计
    35.     //异步下发起下次搜索时重置变量
    36.     var preXhrs = [],$ = window.$;
    37.     if($) {
    38.         $(window).on("swap_begin",function(){
    39.             _imgWatch = [];             //图片加载观察list，如果没有onload，进行容错
    40.             _domLoaded = [];            //标识对应dom是否已下载
    41.             _data = [];                 //暂存请求回调数据
    42.             _dataLoaded = [];        //数据是否返回
    43.             _finish = [];            //是否已完成渲染
    44.             _hasSpImg = false;          //是否有左侧模板sp_img走base64加载
    45.             _expGroup = 0;              //左侧实验组
    46.             _reqTime = 0;              //请求开始时间
    47.             _reqEnd = 0;               //请求返回时间 - 右侧
    48.             _reqEndL = 0;               //请求返回时间 - 左侧
    49.             _rsst = 0;                  //请求开始时间 - 测速
    50.             _rest = 0;                  //请求返回时间 - 测速
    51.             _dt = 1;                   //domain类型
    52.             _ispdc = false;            //是否开启了性能统计
    54.             //停止正在执行的base64回调操作
    55.             for(var i = 0 ; i < preXhrs.length; i++) {
    56.                 preXhrs[i].abort();
    57.             }
    58.         });
    59.     }
    62.     //初始化方法
    63.     var init = function(imgRight,imgLeft,isPreload){
    64.         var imgArr = imgRight || [], imgArr2 = imgLeft || [];
    65.         if(window.__IS_IMG_PREFETCH){
    66.             //异步base64去重
    67.             function filter(img){
    68.                 return !window.__IS_IMG_PREFETCH.hasOwnProperty(img);
    69.             }
    70.             imgArr=$.grep(imgArr,filter);
    71.             imgArr2=$.grep(imgArr2,filter);
    72.         }
    73.         if(window.__IMG_PRELOAD && isPreload) {
    74.             //定义loadState，防止callback乱序
    75.             _loadState["cbr"] = 0;
    76.             _loadState["cbpr"] = 0;
    78.             _hasPreload = 1; //标记页面中有预取
    80.             var imgPreloadList = window.__IMG_PRELOAD = {};
    81.             for(var i = 0; i < imgArr.length; i++) {
    82.                    if(!imgPreloadList.hasOwnProperty(imgArr[i])) {
    83.                     window.__IMG_PRELOAD[imgArr[i]] = true;
    84.                 }
    85.             }
    86.         } else if(window.__IMG_PRELOAD && !isPreload) {
    87.             //同步base64右侧去重
    88.             var tmpArr = [];
    89.             for(var i = 0; i < imgArr.length; i++){
    90.                    if(!window.__IMG_PRELOAD.hasOwnProperty(imgArr[i])) {
    91.                     tmpArr.push(imgArr[i]);
    92.                 }
    93.             }
    94.             imgArr = tmpArr;
    95.         }
    96.         if(_opt.b64Exp) {
    97.             _expGroup = _opt.b64Exp;
    98.             if(_expGroup == 1){
    99.                 _domain = "http://b2.bdstatic.com/"; /*base64 new domain sample deploy*/
    100.                 _dt = 2;
    101.             }
    102.         }
    103.         _ispdc= _opt.pdc>0 ? true : false;
    104.         _reqTime = new Date()*1;
    105.         if(_expGroup==2){
    106.             //左右分别发请求
    107.             if(imgArr2.length>0){
    108.                 _hasSpImg = true;
    109.             }
    110.             if(!isPreload) {
    111.                 cbl({});
    112.             }
    113.         }
    114.         if(imgArr.length>0){
    115.             //发送请求
    116.             if(_ispdc){
    117.                 if(bds.ready){
    118.                     bds.ready(function(){
    119.                         setTimeout(function(){
    120.                             var _bottag = botTag.get();
    121.                             var logstr = "dt=" + _dt + "&time=" + ((_reqEnd>0)?(_reqEnd-_reqTime):0) + "&bot=" + _bottag + "&rcount=" + imgArr.length;
    122.                             window._B64_REQ_LOG = ((_reqEnd>0)?(_reqEnd-_reqTime):0) + "_" + imgArr.length;
    123.                             if(_expGroup==2 && _reqEndL>0){
    124.                                 var _apics = document.getElementById("ala_img_pics");
    125.                                 var _lcount = (_apics&&_apics.children)?_apics.children.length:0;
    126.                                 logstr += "&time2=" + (_reqEndL-_reqTime) + "&lcount=" + _lcount;
    127.                             }
    128.                             if(Math.random()*100<10){
    129.                                 sendLog(logstr);
    130.                             }
    131.                         }, 2000);
    132.                     });
    133.                 }
    134.             }
    135.         } else {
    136.             if(!isPreload) {
    137.                 cbr({});
    138.             }
    139.         }
    140.         if(imgArr.length>0 || imgArr2.length>0){
    141.             if(!isPreload) {
    142.                 watchReq(imgArr.length);
    143.             }
    144.         }
    145.     };
    147.     //异步加载js
    148.     function crc32 (str) {
    149.         if(typeof str=="string"){
    150.             var i,crc=0,j=0;
    151.             for(i=0;i<str.length;i++){
    152.                 j=i%20+1;
    153.                 crc+=str.charCodeAt(i)<<j;
    154.             }
    155.             return Math.abs(crc);
    156.         }
    157.         return 0;
    158.     }
    159.     var loadJs = function (url) {
    160.         var matchs = url.match(/.*(bds\.base64\.cb[rl])/);
    161.         if(!matchs){
    162.             return;
    163.         }
    164.         var imglist=url.match(/imglist=([^&]*)/);
    165.         if(!imglist||!imglist[1]){
    166.             return;
    167.         }
    168.         //see b64_base_popstate.js, this just sync result page
    169.         callback_name=crc32(imglist[1].replace(/,/g,""));
    170.         callback_name="cb_"+(callback_name+"").substr(Math.max(0,callback_name.length-8),8)+"_0";
    171.         window[callback_name]=function(data){
    172.             if(matchs[1] == "bds.base64.cbr") {
    173.                 cbr(data);
    174.             }else if(matchs[1] == "bds.base64.cbl") {
    175.                 cbl(data);
    176.             }
    177.             window[callback_name]=null;
    178.         };
    179.         var url = matchs[0].replace(/bds\.base64\.cb[rl]/,callback_name);
    181.         var a = document.createElement("script");
    182.         a.setAttribute("type", "text/javascript");
    183.         a.setAttribute("src", url);
    184.         a.setAttribute("defer", "defer");
    185.         a.setAttribute("async", "true");
    186.         document.getElementsByTagName("head")[0].appendChild(a);
    187.     };
    189.     //图片回填
    190.     var imgLoad = function(data,side){
    191.         if(_finish[side]){
    192.             return;
    193.         }
    194.         _finish[side] = true;
    195.         if(side=="right"){
    196.             botTag.ot(false); //设置超时标记减1.
    197.         }
    198.         //获取所有图片，通过data-base64-id属性获取需要回填的图片
    199.         var imgs = document.getElementById(_expGroup!=1?((side=="left")?_containerLeftId:_containerRightId):_containerAllId).getElementsByTagName("IMG");
    200.         for(var i=0;i<imgs.length;i++){
    201.             var b64Id = imgs[i].getAttribute("data-b64-id");
    202.             if(b64Id){
    203.                 var find = false;
    204.                 if(data.hasOwnProperty(b64Id)) {
    205.                     setSrc(imgs[i],data[b64Id]);
    206.                     find = true;
    207.                 }
    208.                 if(!find){
    209.                     //小容错
    210.                     failover(imgs[i]);
    211.                 }
    212.             }
    213.         }
    214.         fail_ie7();
    215.     };
    216.     function fail_ie7(){
    217.         //外层容错 IE7
    218.         setTimeout(function(){
    219.             for( var i=0; i<_imgWatch.length; i++ ){
    220.                 var n = _imgWatch[i];
    221.                 if(!n.loaded){
    222.                     failover(n.obj);
    223.                 }
    224.             }
    225.             _imgWatch=[];
    226.         },200);
    227.     }
    228.     function setSrc(img,data){
    229.         try{
    230.             img.onerror = function(){
    231.                 failover(this);
    232.             };
    234.             //标记监视，供容错检查
    235.             _imgWatch.push({
    236.                 obj:img,
    237.                 loaded:false
    238.             });
    240.             img.onload = function(){
    241.                 //标记已加载
    242.                 for( var i=0; i<_imgWatch.length; i++ ){
    243.                     var m = _imgWatch[i];
    244.                     if(m.obj == this){
    245.                         m.loaded = true;
    246.                     }
    247.                 }
    248.             };
    249.             img.src = "data:image\/jpeg;base64," + data;
    250.         }catch(e){
    251.             //触发exception
    252.             failover(img);
    253.         }
    254.     }
    256.     //容错，回填原始src
    257.     var failover = function(img){
    258.         if(img.getAttribute("data-b64-id")!=null && img.getAttribute("data-b64-id")!="" && img.getAttribute("data-src")!=null){
    259.             img.src = img.getAttribute("data-src");
    260.         }
    261.     };
    263.     var watchReq = function(len){
    264.         var wt = 1250;
    265.         if(len<6){
    266.             wt = 1000;
    267.         }else if(len>10){
    268.             wt = 1500;
    269.         }
    270.         setTimeout(function(){
    271.             if( !_dataLoaded["right"] ){
    272.                 var imgs = document.getElementById(_containerRightId).getElementsByTagName("IMG");
    273.                 for(var i=0;i<imgs.length;i++){
    274.                     failover(imgs[i]);
    275.                 }
    276.                 _finish["right"] = true;
    277.                 //设置超时标记
    278.                 botTag.ot(true);
    279.             }
    280.             setTimeout(function(){
    281.                 if(_hasSpImg && !_dataLoaded["left"]){
    282.                     var imgs = document.getElementById(_containerLeftId).getElementsByTagName("IMG");
    283.                     for(var i=0;i<imgs.length;i++){
    284.                         failover(imgs[i]);
    285.                        }
    286.                     _finish["left"] = true;
    287.                 }
    288.             },500);
    289.         },wt);
    290.     };
    292.     /**
    293.      * base64网速检测标记
    294.      *   超时次数变量 BOT
    295.      *   初始：0
    296.      *   范围：0-6
    297.      *   变换规则：
    298.      *       每次超时，BOT +1;
    299.      *          每次正常：BOT -1;
    300.      *       到达边界值时，不再继续增加/减少
    301.      *     如何使用：（未上线）
    302.      *        BOT大于3时，设置cookie: B64_BOT=1，VUI针对本次请求，读cookie，如果B64_BOT=1，关闭base64服务
    303.      *       当BOT小于3时，设置cookie: B64_BOT=0，VUI正常开启base64服务。
    304.      */
    305.     var botTag = {
    306.         ot : function(isInc){
    307.             var _bottag = botTag.get();
    308.             if(isInc){
    309.                 if(_bottag<6){
    310.                     _bottag++;
    311.                 }
    312.             }else{
    313.                 if(_bottag>0){
    314.                     _bottag--;
    315.                 }
    316.             }
    317.             if( _bottag>=2 ){
    318.                 var date = new Date();
    319.                 date.setTime(date.getTime() + 24*3600*1000*5);
    320.                 //此处设置cookie
    321.                 document.cookie = "B64_BOT=1; expires=" + date.toGMTString();
    322.                 //_bottag = 0;
    323.             }else if( _bottag<1 ){
    324.                 if(document.cookie.match('B64_BOT=1')){
    325.                     document.cookie = "B64_BOT=0;";
    326.                 }
    327.             }
    328.             try{
    329.                 if(window.localStorage){
    330.                     window.localStorage[_BOTTAGLSNAME] = _bottag;
    331.                 }
    332.             }catch(e){}
    333.         },
    334.         get : function(){
    335.             try{
    336.                 if(window.localStorage){
    337.                     var _bottag = window.localStorage[_BOTTAGLSNAME];
    338.                         _bottag = _bottag?parseInt(_bottag):0;
    339.             …