1、文章源至：
jquery.lazyload.js实现延时加载图片 ，实现网页分屏加载
jquery.lazyload.js的实现原理是在图片的下载过程中中断图片的下载,把图片的src属性转换为orginal属性..
然后页面滚动的时候到达临界点就再把orginal路径转换为src的路径 ...
在图片尺寸比较大的情况下，图片加载较慢，因此请求会被拦截，并且保留客户端数据，在下次Img标签加载Load方法的时候，可以继续请求图片数据。
然而，多篇网上文章显示，该JS并不能真正减少http请求。 原因如下：
图片一开始就有正确src，lazyLoad就算在快也快不过页面打开的
2、http请求撒～不信？
可以到QiQiBoy那文章： 《JavaScript & images LazyLoad 图片延迟加载(伪lazyload)》，打开Demo页面，用开发者工具看看图片有被下载不？
其实还是下载了图片 也就是说http请求还是发送出去了,只不过在客户端lazyload人为的中断了图片的下载..这不是我需要的效果。
于是我参考了《改造jQuery lazyLoad插件》一文，对jquery.lazyload.js进行一番修改。对前台的页面也要做一些修改。源码如下：
html页面：
4、cript type="text/javascript" src="Js/lazyload/jquery.js">
5、
6、t="25%" \>
8、
jquery.lazyload.js
/*
* Lazy Load - jQuery plugin for lazy loading images
*
* Copyright (c) 200710、2009 Mika Tuupola
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Project home:
*
*
* Version: 1.5.0
*
*/
(function($) {
$.fn.lazyload = function(options) {
var settings = {
threshold : 0,
failurelimit : 0,
event : "scroll
11、",
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
12、 = 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;
13、}
}
});
/* 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("
14、appear", function() {
if (!this.loaded) {
$("![]()
").bind("load", function() {
if ($(self).attr("original")){
$(self).hide().attr("src", $(self).attr("original"))[settings.effect](settings.effectspeed);
self.loaded = true;
}
}).attr("src", $(self).attr("original"));
};
});
/* When wan
15、ted 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.
16、 */
$(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 || setti
17、ngs.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 (sett
18、ings.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 = f
19、unction(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();
};
$.leftofbeg
20、in = 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();
};
/* C
21、ustom 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" : "$.righ
22、toffold(a, {threshold : 0, container: window})",
"left-of-fold" : "!$.rightoffold(a, {threshold : 0, container: window})"
});
})(jQuery);
原理：
将图片真实地址保存在自定义属性original中，而src中仅存代替图片gary.gif。在加载的时候利用lazyload进行置换。同时我也考虑了动态加载图片的情况（如html文件中append的情况）。
改造Jquery.LazyLoad.js函数，根据浏览器版本来显示不同的滤镜效果：
v
23、ar public = checkbrowse();
var showeffect = "";
if ((public['is'] == 'msie' && public['ver'] < 8.0)) {
showeffect = "show"
} else {
showeffect = "fadeIn"
}
jQuery(document).ready(function($) {
$("img").lazyload({
placeholder: "
effect: showeffect,
failurelimit: 10
})
});
24、Jquery.LazyLoad.js使用方法：
1、将以下文件存放在同一目录下面：
jquery.js
jquery.layzload.js
grey.gif
2、在需要使用特效的地方加上如下的代码：
26、
4,事件触发时才加载
event : "click",
参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
5,对某容器中的图片实现效果
container: $("#container"),
参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
6,图片排序混乱时
failurelimit : 10,
参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
