改造的JQUERY 延迟加载插件

最近前端数据延迟加载(lazyload)技术很流行...
淘宝,新浪网都有使用延迟加载技术,
这样做的目的可以使得一些未在本屏幕显示的图片随着滚动条的滚动进行延迟显示。
好处显而易见，可以减少客户端对服务器端图片的Http请求，减轻服务器的压力，
对于长篇并且大批量的图片的网页效果非常明显
可惜淘宝网的延迟加载是基于YUI写的。。

个人习惯使用jQuery，或者说我不懂YUI好了。。。,刚好看到jQuery也有一个叫Lazyload的插件

这个插件的使用非常的傻瓜化。。

$("img").lazyload({
effect      : "fadeIn"
});

这样页面所有的图片都支持延迟加载了..
他的实现原理是在图片的下载过程中中断图片的下载,把图片的src属性转换为orginal属性..
然后页面滚动的时候到达临界点就再把orginal路径转换为src的路径 ...
在图片尺寸比较大的情况下，图片加载较慢，因此请求会被拦截，并且保留客户端数据，在下次Img标签加载Load方法的时候，可以继续请求图片数据
看来下lazyload这款JQuery插件的实现原理。。其实还是下载了图片 也就是说http请求还是发送出去了,只不过在客户端lazyload人为的中断了图片的下载..这不是我需要的效果
既然知道了插件的原理,我们就给我们要延迟加载的图片加一个orginal属性来保存图片的真正地址..而图片的src地址就用一个非常下的图片来代替

<img src="blank.gif" original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_hood.jpg?1280456771" width="765" height="574" alt="BMW M1 Hood"><br/>
<img  src="blank.gif" original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_side.jpg?1280456771" width="765" height="574" alt="BMW M1 Side"><br/>
<img src="blank.gif" original="http://www.appelsiini.net/projects/lazyload/img/viper_1.jpg?1280456771" width="765" height="574" alt="Viper 1"><br/>
<img src="blank.gif" original="http://www.appelsiini.net/projects/lazyload/img/viper_corner.jpg?1280456771" width="765" height="574" alt="Viper Corner"><br/>
<img src="blank.gif" original="http://www.appelsiini.net/projects/lazyload/img/bmw_m3_gt.jpg?1280456771" width="765" height="574" alt="BMW M3 GT"><br/>
<img src="blank.gif" original="http://www.appelsiini.net/projects/lazyload/img/corvette_pitstop.jpg?1280456771" width="765" height="574" alt="Corvette Pitstop"><br/>

哈哈这样所有图片就都显示blank.gif了,由于都是请求的同一个图片,浏览器只会请求一次..对于减少服务器http请求来说,我们的目标已经达到了.下面我们要修改下lazyload这款插件的源代码.

/*
* Lazy Load - jQuery plugin for lazy loading images
*
* Copyright (c) 2007-2009 Mika Tuupola
*
* Licensed under the MIT license:
*   http://www.opensource.org/licenses/mit-license.php
*
* Project home:
*   http://www.appelsiini.net/projects/lazyload
*
* Version:  1.5.0
*
*/
(function($) {
$.fn.lazyload = function(options) {
var settings = {
threshold    : 0,
failurelimit : 0,
event        : "scroll",
effect       : "show",
container    : window
};
if(options) {
$.extend(settings, options);
}
/* Fire one scroll event per scroll. Not one scroll event per image. */
var elements = this;
if ("scroll" == settings.event) {
$(settings.container).bind("scroll", function(event) {
var counter = 0;
elements.each(function() {
if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)) {
/* Nothing. */
} else if (!$.belowthefold(this, settings) &&
!$.rightoffold(this, settings)) {
$(this).trigger("appear");
} else {
if (counter++ > settings.failurelimit) {
return false;
}
}
});
/* Remove image from array so it is not looped next time. */
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);
});
}
this.each(function() {
var self = this;
//我就把这里的一段代码删除了
/* When appear is triggered load original image. */
$(self).one("appear", function() {
if (!this.loaded) {
$("<img />")
.bind("load", function() {
$(self)
.hide()
.attr("src", $(self).attr("original"))
[settings.effect](settings.effectspeed);
self.loaded = true;
})
.attr("src", $(self).attr("original"));
};
});
/* When wanted event is triggered load original image */
/* by triggering appear.                              */
if ("scroll" != settings.event) {
$(self).bind(settings.event, function(event) {
if (!self.loaded) {
$(self).trigger("appear");
}
});
}
});
/* Force initial check if images should appear. */
$(settings.container).trigger(settings.event);
return this;
};
/* Convenience methods in jQuery namespace.           */
/* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
$.belowthefold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).height() + $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top + $(settings.container).height();
}
return fold <= $(element).offset().top - settings.threshold;
};
$.rightoffold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).width() + $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left + $(settings.container).width();
}
return fold <= $(element).offset().left - settings.threshold;
};
$.abovethetop = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top;
}
return fold >= $(element).offset().top + settings.threshold  + $(element).height();
};
$.leftofbegin = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left;
}
return fold >= $(element).offset().left + settings.threshold + $(element).width();
};
/* Custom selectors for your convenience.   */
/* Use as $("img:below-the-fold").something() */
$.extend($.expr[':'], {
"below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
"above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
"right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",
"left-of-fold"   : "!$.rightoffold(a, {threshold : 0, container: window})"
});
})(jQuery);

我就把lazyload插件原本替换图片src路径的代码给删除掉。。。