什么是ImageLazyLoad技术：在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片，占的几M的空间。ImageLazyLoad技术就是，当前可是界面的图片是加载进来的，而不可见页面（通过滚动条下拉可见）中的图片是不加载的，这样势必会引起速度上质的提升。
目前网页上的主要应用是争对图片的延迟加载：有很多JS可以直接使用：kissy(淘宝的JS框架),Jquery，Prototype，YUI 2都有插件：
1. 淘宝的使用：
下载该文件到项目中：
下载<script src="" type="text/javascript"></script>
也可以直接使用这个地址，但是如果淘宝更新你就需要修改项目了，所以还是建议下载到本地使用：
在页面head中加入该代码：
<script src="/js/imglazyload-min.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[KISSY.ImageLazyload();// ]]></script>
注：该脚本依赖 yahoo-dom-event, 页面中需要加载 yui 2.x
<script src="" type="text/javascript"></script>
配置参数如下：
<script type="text/javascript">
KISSY.ImageLazyload({
mod: "manual", // 延迟模式。默认为 auto
diff: 200 // 当前屏幕下多远处的图片开始延迟加载。默认两屏外的图片才延迟加载
});
</script>
manual 模式时，需要手动将页面中需要延迟加载的图片的 src 属性名更改为 data-lazyload-src. 比如 SRP 页面，宝贝列表的后20个图片延迟加载。输出时，html 代码为：
2.jquery的使用：因为我的项目中用了jquery,所以我用的ImageLazyLoad就是jquery的插件，地址是：
使用方法：在页面中加入：
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("img").lazyload();
});
</script>
配置参数：
设置敏感度：插件提供了 threshold 选项, 可以通过设置临界值 (触发加载处到图片的距离) 来控制图片的加载. 默认值为 0 (到达图片边界的时候加载).
$("img").lazyload({ threshold : 200 });
占位图片：你还可以设定一个占位图片并定义事件来触发加载动作. 这时需要为占位图片设定一个 URL 地址. 透明, 灰色和白色的 1x1 象素的图片已经包含在插件里面.
$("img").lazyload({ placeholder : "img/grey.gif" });
事件触发加载：事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
其它配置具体看看：
3.Prototype的使用：
使用方法：
Element.addMethods({
lazyload: function(element, options)
{
/**
What does it do?
It delays loading of images in (long) pages. Images below the fold (far down in the
page) won’t be loaded before the user scrolls down. This is exact opposite of image
preloading. With long pages containing heavy image content end user result is the
same. Page feels snappier. Browser is in ready state after loading visible images.
No need to wait for n pictures to load.
From Wikipedia:
Lazy loading is a design pattern commonly used in computer programming to defer
initialization of an object until the point at which it is needed. It can contribute
to efficiency in the program’s operation if properly and appropriately used.
Inspired by:
http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin
Requires:
Prototype.js version 1.6.0_rc0 or later
A page with lots of big images below the fold (optional)
*/
function $restore()
{
// this function restores the original image source; called when above the fold
if ( true === $(element).hasAttribute('_src') )
{
$(element).writeAttribute({ src: $(element).readAttribute('_src') });
}
}
function $scroll()
{
// this function returns the amount the page is scrolled vertically
var scroll_y = self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
return parseInt(scroll_y);
}
function $height()
{
// this function returns the height of the viewport
var window_height = window.innerHeight || document.documentElement.clientHeight;
return parseInt(window_height);
}
var element = $(element);
var options = Object.extend({
threshold : 0,
placeholder : '/images/grey.gif',
event : 'scroll',
frequency : 0.1
}, options || {});
var offset = $(element).cumulativeOffset()[1];
var activate_on = (offset - options.threshold) - $height();
var old_source = $(element).readAttribute('src');
var new_source = options.placeholder;
$(element)
.writeAttribute({ src : new_source })
.writeAttribute({ '_src' : old_source });
if ( 'scroll' === options.event )
{
new PeriodicalExecuter(function($executor)
{
if ( activate_on <= $scroll() )
{
$restore(); $executor.stop();
}
}, options.frequency);
}
else
{
$(element).observe(options.event, function(event)
{
$restore(); $(element).stopObserving();
});
}
return $(element);
}
});
document.observe('contentloaded', function()
{
$$('img').invoke('lazyload');
});
<script src="Prototype.js" type="text/javascript"></script>
4.YUI 2的使用: http://developer.yahoo.com/yui/imageloader/
使用方法：
<script src=">
<script src=">
其它配置参数看详细文档。
总结：延迟加载对用户体验来说效果很明显，这里介绍的还是单纯的图片延迟加载，如果能实现到对整个页面按照区块来进行延迟加载的话，效果应该更加明显，当然有得必有失。看了下国内目前很多门户网站和视频网站都没有应用该技术，不清楚是他们考虑其它问题还是什么原因，比如大量图片的页面(新闻页面或者视频页面)个人觉得很适合使用图片延迟加载。
