http://blog.csdn.net/ning109314/article/details/7042829
目前图片延迟加载主要分两大块，一是触发加载（根据滚动条位置加载图片）；二是自动预加载（加载完首屏后n秒后自动加载其他位置的图片）。现在最流行使用的就是LazyLoad.js及scrollLoading.js这两个用Jquery写的小插件。
一、LazyLoad实现：
<script type="text/javascript" src="/js/lazyload/jquery.min.js"></script>
<script type="text/javascript" src="/js/lazyload/lazyload.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function($){
$("img").lazyload({
effect : "fadeIn"
});
});
</script>
网上找到一个更好点的处理方式，以下方式转自http://www.poluoluo.com/jzxy/201110/145261.html：
<script type="text/javascript">
//首先用JQ判断浏览器类型及版本，如果是IE8以下的浏览器就用effect=show，否则就用effect=fadeIn，判断浏览器版本函数如下
function checkbrowse() {
var ua = navigator.userAgent.toLowerCase();
var is = (ua.match(/\b(chrome|opera|safari|msie|firefox)\b/) || [‘‘, ‘mozilla‘])[1];
var r = ‘(?:‘ + is + ‘|version)[\\/: ]([\\d.]+)‘;
var v = (ua.match(new RegExp(r)) || [])[1];
jQuery.browser.is = is;
jQuery.browser.ver = v;
return {
‘is‘: jQuery.browser.is,
‘ver‘: jQuery.browser.ver
}
}
//改造Jquery.LazyLoad.js函数，根据浏览器版本来显示不同的滤镜效果
var public = checkbrowse();
var showeffect = "";
if ((public[‘is‘] == ‘msie‘ && public[‘ver‘] < 8.0)) {
showeffect = "show"
} else {
showeffect = "fadeIn"
}
jQuery(document).ready(function($) {
$("img").lazyload({
placeholder: "http://demo.jb51.net/js/2011/lazyload/Js/lazyload/grey.gif",
effect: showeffect,
failurelimit: 10
})
});
</script>
html:
<img src="/js/lazyload/pixel.gif" original="真实图片路径" />
而LazyLoad只是给你一个延迟加载的假象，每次图片都会加载两次，完全就是一个假象的延迟加载。可以修改LazyLoad文件实现真实延迟加载，本人比较懒，就直接在网上找了一个修改好的，嘿嘿
1 /*
2 * Lazy Load - jQuery plugin for lazy loading images
3 *
4 * Copyright (c) 2007-2009 Mika Tuupola
5 *
6 * Licensed under the MIT license:
7 * http://www.opensource.org/licenses/mit-license.php
8 *
9 * Project home:
10 * http://www.appelsiini.net/projects/lazyload
11 *
12 * Version: 1.5.0
13 *
14 */
15 (function ($) {
16 $.fn.lazyload = function (options) {
17 var settings = {
18 threshold: 0,
19 failurelimit: 0,
20 event: "scroll",
21 effect: "show",
22 container: window
23 };
24 if (options) {
25 $.extend(settings, options);
26 }
27 /* Fire one scroll event per scroll. Not one scroll event per image. */
28 var elements = this;
29 if ("scroll" == settings.event) {
30 $(settings.container).bind("scroll", function (event) {
31 var counter = 0;
32 elements.each(function () {
33 if ($.abovethetop(this, settings) ||
34 $.leftofbegin(this, settings)) {
35 /* Nothing. */
36 } else if (!$.belowthefold(this, settings) &&
37 !$.rightoffold(this, settings)) {
38 $(this).trigger("appear");
39 } else {
40 if (counter++ > settings.failurelimit) {
41 return false;
42 }
43 }
44 });
45 /* Remove image from array so it is not looped next time. */
46 var temp = $.grep(elements, function (element) {
47 return !element.loaded;
48 });
49 elements = $(temp);
50 });
51 }
52 this.each(function () {
53 var self = this;
54 //删除的代码
1 /* When appear is triggered load original image. */
2 $(self).one("appear", function () {
3 if (!this.loaded) {
4 $("<img />")
5 .bind("load", function () {
6 $(self)
7 .hide()
8 .attr("src", $(self).attr("original"))
9 [settings.effect](settings.effectspeed);
10 self.loaded = true;
11 })
12 .attr("src", $(self).attr("original"));
13 };
14 });
15 /* When wanted event is triggered load original image */
16 /* by triggering appear. */
17 if ("scroll" != settings.event) {
18 $(self).bind(settings.event, function (event) {
19 if (!self.loaded) {
20 $(self).trigger("appear");
21 }
22 });
23 }
24 });
25 /* Force initial check if images should appear. */
26 $(settings.container).trigger(settings.event);
27 return this;
28 };
29 /* Convenience methods in jQuery namespace. */
30 /* Use as $.belowthefold(element, {threshold : 100, container : window}) */
31 $.belowthefold = function (element, settings) {
32 if (settings.container === undefined || settings.container === window) {
33 var fold = $(window).height() + $(window).scrollTop();
34 } else {
35 var fold = $(settings.container).offset().top + $(settings.container).height();
36 }
37 return fold <= $(element).offset().top - settings.threshold;
38 };
39 $.rightoffold = function (element, settings) {
40 if (settings.container === undefined || settings.container === window) {
41 var fold = $(window).width() + $(window).scrollLeft();
42 } else {
43 var fold = $(settings.container).offset().left + $(settings.container).width();
44 }
45 return fold <= $(element).offset().left - settings.threshold;
46 };
47 $.abovethetop = function (element, settings) {
48 if (settings.container === undefined || settings.container === window) {
49 var fold = $(window).scrollTop();
50 } else {
51 var fold = $(settings.container).offset().top;
52 }
53 return fold >= $(element).offset().top + settings.threshold + $(element).height();
54 };
55 $.leftofbegin = function (element, settings) {
56 if (settings.container === undefined || settings.container === window) {
57 var fold = $(window).scrollLeft();
58 } else {
59 var fold = $(settings.container).offset().left;
60 }
61 return fold >= $(element).offset().left + settings.threshold + $(element).width();
62 };
63 /* Custom selectors for your convenience. */
64 /* Use as $("img:below-the-fold").something() */
65 $.extend($.expr[‘:‘], {
66 "below-the-fold": "$.belowthefold(a, {threshold : 0, container: window})",
67 "above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})",
68 "right-of-fold": "$.rightoffold(a, {threshold : 0, container: window})",
69 "left-of-fold": "!$.rightoffold(a, {threshold : 0, container: window})"
70 });
71 })(jQuery);
二、scrollLoading实现
<script src="/js/lazyload/jquery.scrollLoading.js" type="text/javascript"></script><script type="text/javascript" src="/js/lazyload//jquery_002.js"></script>
<script type="text/javascript" src="/js/lazyload//jquery.js"></script>
<script>
$(function() {
$(".scrollLoading").scrollLoading();
});
</script>
HTML：
<img class="scrollLoading" style="background: url("/js/lazyload/pixel.gif") no-repeat scroll center center transparent;" src="/js/lazyload/pixel.gif" style="WIDTH: 526px; HEIGHT: 293px" data-url="真实路径"/>
scrollLoading的实现相对而言比较麻烦一下
如果需要对应的JS包请去下载：
http://download.csdn.net/detail/ning109314/3882760