asp.net 图片延迟加载（参考别人写的案例实验一下）
方法1
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm43.aspx.cs" Inherits="jquerytest.WebForm43" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="Image/1/grey.gif" alt="" original="Image/1/IMG_0202.jpg" />
<img src="Image/1/grey.gif" alt="" original="Image/1/IMG_0208.jpg" />
</div>
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
$(function() {
$("img[original]").lazyload({
placeholder: "Image/1/grey.gif",
effect: "fadeIn"
});
});
</script>
方法2
<img src="" alt="" original="Image/1/IMG_0202.jpg" />
<script type="text/javascript">
$(function () {
//对图片做延迟加载 add by tanyong@2014-4-18
$("img").lazyload({
effect: "fadeIn"
});
})
</script>
用 original 属性 替换 图片原始路径，达到延迟加载效果
grey.gif 图片下载地址
原理：打开某页面一开给，给空的图片放在页面上，等页面加载完等全部替换你要展示的图片，这样就达到了延迟加载效果。
如果图片效果不明显，请固定 图片宽度。
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;
/* Save original only if it is not defined in HTML.
if (undefined == $(self).attr("original")) {
$(self).attr("original", $(self).attr("src"));
}*/
if ("scroll" != settings.event ||
undefined == $(self).attr("src") ||
settings.placeholder == $(self).attr("src") ||
($.abovethetop(self, settings) ||
$.leftofbegin(self, settings) ||
$.belowthefold(self, settings) ||
$.rightoffold(self, settings))) {
if (settings.placeholder) {
$(self).attr("src", settings.placeholder);
} else {
$(self).removeAttr("src");
}
self.loaded = false;
} else {
self.loaded = true;
}
/* When appear is triggered load original image. */
$(self).one("appear", function () {
if (!this.loaded) {
$("<img />")
.bind("load", function () {
if ($(self).attr("descImage") != null) {
$(self).attr("style", "overflow:hidden; width:500px; margin-left:105px; margin-top:10px;");
}
$(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);