利用浏览器缓存来加速图片广告显示

显示一个广告通常顺序为

  1. 向服务端请求数据,看看该显示啥图片
  2. 请求图片
  3. 下载图片 或者 使用本地缓存

在这种情况下除了下载图片花时间外,请求数据有时也挺花时间,像请求阻塞这种还可以调整优化,但网络问题基本是没救的。

通常说广告显示得慢就慢了,无所谓,但是对于把广告当内容用的主,开天窗(就是页面主要位置空白)时, 体验还是比较差滴。

为了避免开天窗,我分析了下方案

  1. 加 loading 图片,好像现在多数这样干。
    顺便推荐大家看下这两个 css3 实现的 loading 效果 [1] [2]
    我也做了个练习,方式不大一样 ^_^ 大家娱乐吧
  2. 设置接口数据的过期时间,让其直接使用 local cache
    缺点:导致新广告不能实时的投放
  3. 利用浏览器缓存显示上次广告当过渡,
    缺点:现在的浏览器缓存比较容易被 T 掉,
       也可能导致新广告不能实时的投放,比如新广告还没出来就被点走了
       也可能导致用户疑惑,刚看到的好广告想点却不见了,因为广告变了

在广告不是每次刷新都变的情况下,我觉得组合 1 跟 3 来使用,效果应该挺好的。不过就算每次都刷新都不一样的话,其实也是挺有用的,因为下载图片要时间,

又不过广告是跟RMB打交道 ,某些方面就要重新设计。

第三种方案的实现比较麻烦的是判断图片是否在浏览器的缓存里

img = new Image();
img.src = 'ad.url' ;
if( img.complete ) {
    // ad.show(); 
} else{
    img.src = null; img = null; //img.src ='loading.gif' ;
}

这代码好像看起来可行,但除了IE 外 其他浏览器是并不能 abort 掉图片请求,而是抛弃请求,也就是说图片的请求还是会被发出去,又不过针对中国的特色,只处理IE的好像已经满足大部分用户。 不知道大家有什么比较好的方案查缓存。

无 Demo 无真相,大家自己玩。理论上是可以用在很多地方。

This entry was posted in Web开发 and tagged , . Bookmark the permalink.

5 Responses to 利用浏览器缓存来加速图片广告显示

  1. 水色 @ 2012-06-13 at 17:32

    想要截住一个图片请求,其实很简单,可以把请求放在同域的iframe里操作,
    通过iframe可以传递数据,通过操作iframe的地址可以取消iframe页面里的所有请求。

    • aoao @ 2012-06-16 at 17:39

      iframe 果然是万能的,Yeah!!! ,用window.stop() 可能会更好。

  2. 雨中无伞 @ 2012-11-28 at 15:44

    var Global={};
    Global.imgObj=new Image();
    Global.imgObj.src=”;

    Global.imgArr=[];
    Global.imgArr[1]=’http://img5.cache.netease.com/photo/0026/2012-11-27/8HB08TQ643AJ0026.jpg’;
    Global.imgArr[2]=’http://img1.cache.netease.com/cnews/2012/11/28/20121128104959fa8d4.jpg’;
    Global.imgArr[3]=’http://i.firefoxchina.cn/images/upload/20121116183857_201211162.jpg’;
    Global.imgArr[4]=’http://himg2.huanqiu.com/attachment2010/2012/1110/20121110023613519.jpg’;

    for(var i=1;i<5;i++){
    var imgObjI='imgObj'+i;
    Global[imgObjI]=new Image();;
    Global[imgObjI].src=Global.imgArr[i];
    console.log(Global[imgObjI].src)
    }
    function imgCache(){
    var mID=document.getElementById('m');
    switch(mID.title){
    case '1':
    mID.title=2;mID.src=Global.imgObj4.src;break;
    case '2':
    mID.title=3;mID.src=Global.imgObj3.src;break;
    case '3':
    mID.title=4;mID.src=Global.imgObj2.src;break;
    case '4':
    mID.title=1;mID.src=Global.imgObj1.src;break;
    }
    }
    setInterval(imgCache,1000);
    //成功。。。从缓存中获取

  3. thinkCu @ 2013-01-03 at 23:27

    路过看了楼主的书,很好

  4. Aivier @ 2013-07-09 at 08:59

    请求最耗费时间。。。所以我把小图直接嵌入css,大图也压缩一下

发表评论

(必填)

(必填)