改造， jQuery lazyLoad的东西 延迟加载 图片

jQuery lazyLoad相信很多人有在用，也因其使用简单效果明显。可它并未实现真正意义上的延迟加载图片！

可以看看它的JS源码，基本原理：

1.更改图片的src属性为orginal属性，中断图片加载。

2.图片滚动到可视区域后再，再把orginal属性更改为src属性，使图片显示出来。

懂一点点jQuery的童鞋应该了解jQuery的加载机制，它的所有功能代码都要如下放置：

jQuery(document).ready(function($){  //这句话神马意思？指页面DOM加载完成后执行！
 
    //功能代码加这儿
 
});

 

可图片一开始就有正确src，lazyLoad就算在快也快不过页面打开的http请求撒～不信？

可以到QiQiBoy那文章： 《JavaScript & images LazyLoad 图片延迟加载(伪lazyload)》，打开Demo页面，用开发者工具看看图片有被下载不？

那怎样才能真正延迟加载呢？答案也只有一个，后台图片输出时src里已经是占位图了。

弄清了以上这些内容，我还花了大半个小时自己用jQuery尝试写了写，只实现了一张图片的……多张设计到遍历数组什么的，晕！

搜索中发现了好方法，省心又省力： 《改造jQuery lazyLoad插件》

这位筒子的改造思路也很清晰：去除lazyLoad插件的中的“1.更改图片的src属性为orginal属性”的相关代码，然后手动完成图片src属性的设置。

由此，我想到把留言头像用上这个真正延迟加载的效果。正好Willin大师的头像缓存代码有自定义输出头像img代码，手动更改为：

<img title='{$alt}' alt='{$alt}' src='grey.gif' data-src='{$a}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />

 

这样就实现了所有头像图片最初就加载一个1×1px的占位图，而真正的src放在了data-src内，然后对lazyLoad里的源码也做相应的修改，Perfect！

修改后的lazyLoad经过压缩仅1.72KB，需要地：（已修改默认显示效果为fadeIn）

最后，当然还得把下面这句加上：

<script type="text/javascript">
 
$("#comments .commentmeta img").lazyload();//选择对象请自行修改！
 
</script>

 

PS1：这儿的留言者头像延迟加载效果可能需要刷新下页面才可以看到，需要清一下原来的JS缓存～

PS2：报的另外一个区教育局招聘到今儿报名结束了，由于专升本符合那些要求的荣誉都是专科时获得的，有那么一点点偏差，就不晓得让不让我考了。又是一次不蛋定地等待开始……