asp.net 图片延迟加载(参考别人写的案例实验一下)
2012-04-26 15:22
363 查看
方法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);
相关文章推荐
- ASP.NET实现图片延迟加载
- jquery插件实现图片延迟加载【引用别人】
- 基于Asp.net的CMS系统We7架设实验(环境WIN7,SQL2005,.NET3.5)(初学者参考贴) 【转】
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- 初步整理了一下ASP.NET Portal Starter Kit代码,供大家参考
- ASP.NET EF 延迟加载,导航属性延迟加载
- ASP.NET EF 延迟加载,导航属性延迟加载
- web优化之-asp.net js延迟加载 js动态合并 js动态压缩
- ASP.NET站点性能提升-减少图片加载时间
- asp.net中TreeView异步延迟加载
- 初步整理了一下ASP.NET Portal Starter Kit代码,供大家参考
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- ASP.NET Web Froms开发模式中实现程序集的延迟加载
- asp.net中js和jquery调用ashx的不同方法分享,需要的朋友可以参考一下
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- asp.net中TreeView异步延迟加载
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
- asp.net 页面引入外部JS 在IE6下延迟加载报错,IE7+均没问题
- web优化之-asp.net js延迟加载 js动态合并 js动态压缩