雨夜带刀's Blog

让document.write的广告无阻塞的加载

广告代码分析

很多第三方的广告系统都是使用document.write来加载广告,如下面的一个javascript的广告链接。

<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执行完后才接着渲染后面的内容,如果广告比较多的话,就会导致页面阻塞,尤其是在页面的首屏插好几个图片尺寸比较大的这种广告,那么阻塞情况就相当明显和严重,会让用户觉得你这个网页很慢。

javascript广告的阻塞加载

图片延迟加载的实现

图片延迟加载也称懒加载,通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留,还可以节省流量。如果TAB中的图片较多,也同样可以应用于TAB中,当触发TAB时再进行图片的加载。

图片延迟加载的原理比较简单,先将图片的真实地址缓存在一个自定义的属性(lazy-src)中,而src地址使用一个1×1的全透明的占位图片来代替,当然占位图片也可以是其他的图片…

jQuery TAB插件

最近的项目用到TAB效果的地方较多,于是自己稍微封装了下,写成了jQuery插件,方便以后使用,顺便重温下jQuery插件的实现机制。

在写插件之前对常见的TAB效果做了下总结,大体上也就那几种效果。插件力求简单易用,只要能实现常见的功能即可。

参数说明:

  • event
  • 触发TAB的事件类型,鼠标悬停:mouseover,鼠标点击:click,默认为mouseover。
  • timeout
  • 事件延迟,单位为毫秒,默认为0。
  • auto
  • 自动切换,单位为毫秒,默认为0。
  • callback
  • 回调函数,触发TAB时执行,函数的参数返回的是this。

强大的jQuery弹出层插件–BlockUI

<p>经常会有些同志问我有没有好用的基于jQuery的弹出层插件,我通常都会毫不犹豫的推荐他这款插件–BlockUI。我也极少接触到其他的jQuery弹出层插件,因为我觉得有了BlockUI这款功能强大的插件已经能满足我的需求了。</p>
<p>先看看BlockUI的演示效果:</p>
<div class="demo"><a href="http://stylechen.com/wp-content/uploads/demo/jquery-blockui/index.html" target="_blank">查看演示</a></div>
<p>BlockUI支持很多常见的弹出层,表单、图片、div窗口等。那么这个插件该如何使用呢?接着往下看。</p>
<p>先导入jQuery的库文件(小提示:使用Google服务器的压缩版jQuery库文件加载速度会更快),然后再导入BlockUI的库文件,如果你觉得库文件比较大你可以使用压缩技术对其进行压缩,本博在另一篇文章中详细的说明了<a href="http://stylechen.com/minify.html" target="_blank" title="压缩JS/CSS的利器–minify">javascript文件和CSS文件的压缩</a>。</p>

使用lazy load延迟图片的加载

lazy load是一款用来延迟图片加载的jQuery插件,如果网页上的图片比较多,使用这个jQuery插件就可以在一定程度上降低服务器的负载,从而达到优化网页的效果。

细心的同志可能注意到了本博首页的文章缩略图的加载效果,当用户往下拖动滚动条的时候,图片才会加载出来。正常的加载方法是在页面载入时同时加载图片的,可以说是“多线程”的加载方式吧,而lazy load的加载方式就是按需加载,效果还是挺不错的。

lazy load的使用也很简单,既然是jQuery插件,那么第一步肯定是在<head>标签中导入jQuery的库文件,然后接着导入lazy load的代码:

头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。