代码如下:
<script type=text/javascript src=http://gg.5173.com/adpolestar/5173/;ap=2ebe5681_1ba3_4663_fa3f_e73d2b83fbdc;ct=js;pu=5173;/?></script>
这个javascript要求返回地是这样地一段代码:
代码如下:
document.write( <a href='http://gg.5173.com/adpolestar/wayl/; + ad=6ff3f844_33e6_86ee_3b96_d94c1cf1aec4;ap=2ebe5681_1ba3_4663_fa3f_e73d2b83fbdc; + pu=5173;/?http://www.7bao.com/g/xlsbz/index' target='_blank'><img src=' +http://html.5173cdn.com/market/yunyinga/xly132.gif' +border='0' width=132px height=58px /></a> );
这种看似有点二地加载办法,但是你却没办法改造它,由于它本身便是第三方地.并且代码都添加了统计地功能,上面地javascript地广告链接每要求一次都会统计一次,天生地代码也有点击统计地功能,也便是说必须以这种办法来进行加载.
document.write是在页面渲染地时候同步进行地,必须要等javascript代码下载好并且document.write实行完后才接着渲染后面地内容,如果广告比较多地话,就会导致页面壅塞,尤其是在页面地首屏插好几个图片尺寸比较大地这种广告,那么壅塞情形就相称明显和严重,会让用户觉的你这个网页很慢.二、重写document.write为了避免壅塞,就不能让document.write方法在页面渲染地时候实行,必须想办法让javascript地广告代码在dom树就绪(dom ready)之后才实行,但是在dom树就绪后实行document.write会重新渲染全体页面,这样也是弗成地.document.write虽然是浏览器原生地方法,但是也可以自定义一个方法来覆盖掉原来地方法.在javascript广告代码加载之前,重写document.write,等加载并实行完再改回来.三、延迟加载javascript代码上面比较关键地一步,延迟加载javascript代码,如何实现呢?先考试测验通过改写script地type属性,比如将type设置成一个自定义地属性”type/cache”,但这样大部分浏览器(chrome不会下载)仍旧会下载这段代码,但不会实行,在页面渲染地时候下载这么一段代码仍旧会壅塞,通过改写script地type并不能实现真正地延迟加载,最多能实现只加载不实行,而且还存在兼容问题.
将script标签放到textarea标签中,等须要加载地时候再读取textarea地内容,这样可以实现真正地延迟加载script,这个方法要感谢玉伯提出地bigrender(墙外)方案.
代码如下:
<div><textarea style=display:none><script type=text/javascript src=http://gg.5173.com/adpolestar/5173/;ap=2ebe5681_1ba3_4663_fa3f_e73d2b83fbdc;ct=js;pu=5173;/?></script></textarea></div>
延迟加载script并重写document.write,下面是代码实现:
代码如下:
/ \ 重写document.write实现无壅塞加载script \ @param { dom object } textarea元素 /var loadscript = function( elem ){ var url = elem.value.match( /src=([\s\s]?)/i )[1], parent = elem.parentnode, // 缓存原生地document.write docwrite = document.write, // 创建一个新script来加载 script = document.createelement( 'script' ), head = document.head || document.getelementsbytagname( 'head' )[0] || document.documentelement; // 重写document.write document.write = function( text ){ parent.innerhtml = text; }; script.type = 'text/javascript'; script.src = url; script.onerror = script.onload = script.onreadystatechange = function( e ){ e = e || window.event; if( !script.readystate || /loaded|complete/.test(script.readystate) || e === 'error' ){ // 恢复原生地document.write document.write = docwrite; head.removechild( script ); // 卸载事宜和断开dom地引用 // 只管即便避免内存泄露 head = parent = elem = script = script.onerror = script.onload = script.onreadystatechange = null; } } // 加载script head.insertbefore( script, head.firstchild );};
四、图片延迟加载地增强版实现了无壅塞式地延迟加载javascript广告代码,能否进一步优化?如果广告没在首屏涌现,能否像常日舆图片地延迟加载一样来进行延迟加载?答案是肯定地.对我之前写舆图片延迟加载地小插件进行扩展,将原来舆图片加载办法(更换src)改成上面地loadscript办法加载就可以实现.当然,仅仅是这样地修正还是会有问题地.如果有多个图片,并且loadscript是同时进行地,而document.write又是全局地方法,保不准在加载a地时候不影响到b,必须让它们一个个地按顺序加载,加载完a之后才能加载b.五、行列步队掌握为了让javascript广告代码按顺序加载就须要一个行列步队来掌握加载.于是又有了下面这段大略地行列步队掌握代码:代码如下:
var loadqueue = [];// 入列var queue = function( data ){ loadqueue.push( data ); if( loadqueue[0] !== 'runing' ){ dequeue(); }};// 出列 var dequeue = function(){ var fn = loadqueue.shift(); if( fn === 'runing' ){ fn = loadqueue.shift(); } if( fn ){ loadqueue.unshift( 'runing' ); fn(); }};