JQuery LazyLoad实现图片延迟加载-探究
对于大量图片的网站,图片延迟加载是提高速度和性能的好方法。
目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片);二是自动预加载(加载完首屏后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" οnerrοr="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. */ } elseif (!$.belowthefold(this, settings) &&!$.rightoffold(this, settings)) { $(this).trigger("appear"); } else {if (counter++> settings.failurelimit) {returnfalse; } } });/* 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);returnthis; };/* 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" οnerrοr="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/
转载于:https://www.cnblogs.com/CharlesGrant/p/3655171.html
JQuery LazyLoad实现图片延迟加载-探究相关推荐
- 使用jquery插件实现图片延迟加载技术
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
- jquery插件实现图片延迟加载
在页面中图片较多时,一次性加载所有图片会耗去很多时间. 我们可以选择"延迟加载"的方式来加载图片,相对这种页面的加载速度将会有个很大的提升. 图片延迟加载的原理很简单,依据用户正浏 ...
- jQuery图片延迟加载插件jQuery.lazyload
查看演示 website 立即下载 插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方 ...
- jquery.lazyload 插件实现图片延迟加载
jquery.lazyload 插件实现图片延迟加载 看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用 JQuery. ...
- 利用Jquery Lazyload JS插件实现网页图片延迟加载
Jquery Lazyload是一款网页图片延迟加载JS插件,本文介绍该JS的使用方法. 最新的jquery lazyload可以单独使用(即不依赖jquery),本文介绍的是依赖jquery的使用及 ...
- Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
之前一直有关注过Jquery.LazyLoad.js这个特效,但一直没有用,这几天研究了一下,并应用于实际中,对网站SEO方面没有什么帮助,不过可以节省一些流量,对于大网站来说显的尤为重要,至于节省了 ...
- JQuery.lazyload 图片延迟加载
1.引入 jquery.lazyload.js 2. 延时加载的方式 <script type="text/javascript"> $(function() { ...
- (转)jQuery插件:Image lazy loader图片延迟加载
原文地址:http://www.cnblogs.com/cnfiowen/archive/2010/02/22/1671483.html Lazy Load 是一个用 JavaScript 编写的 j ...
- jquery图片延迟加载 lazy-src
http://tanglangrong2010.blog.163.com/blog/static/174796716201211282555345/ 目前,主要的购物网站都采用了这种加载方式.今天在一 ...
最新文章
- group by总结(还有having)
- 数据结构:栈、队列、数组、链表、红黑树结构的特点
- 【Linux】crontab命令详解
- Using or importing the ABCs from 'collections' instead of from 'collections.abc' is deprecated since
- CMake生成Opencv在vs 2013的解决方案(出错1)
- 浅析 PHP 中的 Generator
- WatiN-Html元素的操作
- 【万字长文】探讨可信构架之道
- Python Cookbook手记II
- HTML 为啥称“超文本标记语言”?
- [bzoj1878][SDOI2009]HH的项链
- 在linux中cd god,Linux基础/Linux基础和命令.md · kelekele/God-Of-BigData - Gitee.com
- The (Near) Future of Database | TiDB DevCon 2019
- 江苏省计算机一级知识点,江苏省计算机一级考试题库及答案
- SSL-ZYC NOIP
- 使用context:component-scan base-package= /context:component-scan报500错误
- C语言(谭浩强版本,主讲人:小甲鱼)P1-P9
- 离散数学-10.1群
- 常用的在线JS解密工具
- wordpress社交系统_如何将您的WordPress网站变成社交网络
热门文章
- php下memcache结合数据库
- 谣言易碎:诺基亚为何不能投靠Android阵营?
- SQL DATEADD (Transact-SQL)根据需要返回时间,
- POJ 2449 Remmarguts' Date
- python遵循什么协议_《Python网络爬虫》2.3 Robots协议的遵守方式
- 怎么让打印出来表格的纸下面显示页数_4个使用频率较高的Excel打印技巧,办公室打印文件时常常会用到!...
- levedb 导入 mysql_[LevelDB] 数据库3:循序渐进 —— 操作接口
- android jni arm x86,使用houdini(Android模拟器)在基于x86的AVD上运行ARM库
- java线程交替执行_Java synchronized线程交替运行实现过程详解
- 平板电脑安装软件_下载适用于华为和荣耀手机平板电脑的Googlefier GMS安装程序...