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(/(chrome|opera|safari|msie|firefox)/) || ['', '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包请去下载：