对于大量图片的网站，图片延迟加载是提高速度和性能的好方法。
目前图片延迟加载主要分两大块，一是触发加载（根据滚动条位置加载图片）；二是自动预加载（加载完首屏后n秒后自动加载其他位置的图片）。大体常用的就这两种。
这里介绍第一种方法，根据滚动条手动加载图片，最初采用的是LazyLoad.js这个现成的小插件，当然自己用jquery自己写也是很简单的。
我们到LazyLoad网站看看他的工作原理，使用方法：点这里http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/
LazyLoad有是一个傻瓜似的插件，使用相当简单
首先加入jquery的引用
<script src="jquery.js" type="text/javascript"></script><script src="jquery.lazyload.js" type="text/javascript"></script>然后在需要延迟加载的页面加入<script>$("img").lazyload({
placeholder : "/Content/images/grey.gif",
effect : "fadeIn"
});//延迟那些图片，可以自己定义
} |
</script>
<body>
......
@foreach(DataRow dr in Model.Rows){
<img src="http://192.168.0.36:8010/@(dr["fSKC"].ToString()).jpg" onerror="this.src='/Content/images/grey.gif';" />
}
.....
</body>
就这么简单就可以将页面所有的img给“延迟加载”，其他效果可参考http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/
浏览下我们的页面，效果确实能够实现，我们来看看是否真的实现了？
看到结果，我顿时有种被骗的感觉，页面可见区域显示4张图片，那么URL后台请求图片也应该<=4条，但真是的URL请求确是314个项目，很显然后台已经全部把图片加载出来了，而LazyLoad只是给你一个延迟加载的假象！假象！假象！
为什么会这样呢？分析下JQuery LazyLoad的源码
可以看看它的JS源码，基本原理：
1.更改图片的src属性为orginal属性，中断图片加载。
2.图片滚动到可视区域后再，再把orginal属性更改为src属性，使图片显示出来。
懂一点点jQuery的童鞋应该了解jQuery的加载机制，它的所有功能代码都要如下放置：
jQuery(document).ready(function($){ //这句话神马意思？指页面DOM加载完成后执行！
//功能代码加这儿
});
可图片一开始就有正确src，lazyLoad就算在快也快不过页面打开的http请求撒～，所以LazyLoad造成了一个延迟加载的假象
还有一点不得不说的是：浏览器对图片的下载加载方式。如果图片正在下载，然后将其src设置为另外一个，那么之前的图片是会立即被abort吗？所有浏览器都是这样的？如果将src设置为空(img.src=”)，那么之前的图片会被abort停止加载吗？所有浏览器都这样？移除src(removeAttibute(‘src’))呢？
实践证明，上面疑问的答案是 否，也就是无论你移除src或者重设src，都不能阻止浏览器(chrome、ff>4?)下载之前的图片。所以JS版的lazyload是无意义的。只有前后端配合（页面输出前就将img的src设置为占位图），才能真正lazyload。
问题发现了，如何解决呢？根据LazyLoad的思想，方法，我们事先输出占位符，然后通过js判断滚动位置替换img的src为真实图片即可。
扩展后的LazyLoad.js如下：
/** 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);
然后页面内容我们做如下修改
@model System.Data.DataTable@{ ViewBag.Title = ""; Layout = "~/Views/Shared/_Layout.cshtml"; int i = 0;}@section head{ <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="/Scripts/lazyload.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () { $("img").lazyload(); }); </script>}<table align="center"> <tr>.... <th> 图片 </th>.... </tr> @foreach (System.Data.DataRow dr in Model.Rows) { <tr>.... <td> <img src="/Content/images/grey.gif" original="http://192.168.0.36:8010/@(dr["fSKC"].ToString()).jpg" onerror="this.src='/Content/images/grey.gif';" /> </td>..... </tr> }</table>
好我们在看下浏览器的请求
本页的数据量一共300多行，也就是300多个图片，首次加载下，URL加载的请求只有6个，OK啦。
继续往下浏览页面，在看看效果
可以看到，LazyLoad起作用了。
分析下<img src="/Content/images/grey.gif" original="http://192.168.0.36:8010/@(dr["fSKC"].ToString()).jpg" onerror="this.src='/Content/images/grey.gif';" />
首先页面加载的时候就输出站位符号grey.gif，由于所有图片都一样，所以URL只会请求一次grey.gif，而original是真实的图片地址，这个供LazyLoad掩饰加载使用。
本文技术上没啥东西，主要像表明一个道理，不要被表面现象蒙骗！
下载地址：http://files.cnblogs.com/qidian10/LazyLoad.rar
参考文档：
http://immmmm.com/transformation-jquery-lazyload.html
http://www.popo4j.com/qianduan/transformation_jquery_lazyload_plug.html
http://www.qiqiboy.com/2011/04/12/javascript-and-images-lazyload.html
http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/
来源：http://www.cnblogs.com/qidian10/archive/2011/08/17/2143081.html