JQuery LazyLoad实现图片延迟加载-探究

 对于大量图片的网站,图片延迟加载是提高速度和性能的好方法。

  目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片);二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片)。大体常用的就这两种。

  这里介绍第一种方法,根据滚动条手动加载图片,最初采用的是LazyLoad.js这个现成的小插件,当然自己用jquery自己写也是很简单的。

  我们到LazyLoad网站看看他的工作原理,使用方法:点这里http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/

  LazyLoad有是一个傻瓜似的插件,使用相当简单

  首先加入jquery的引用

JQuery LazyLoad实现图片延迟加载-探究
<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/

  
  
  浏览下我们的页面,效果确实能够实现,我们来看看是否真的实现了?

  JQuery LazyLoad实现图片延迟加载-探究

  

  看到结果,我顿时有种被骗的感觉,页面可见区域显示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>
 

  
  好我们在看下浏览器的请求

  JQuery LazyLoad实现图片延迟加载-探究

 JQuery LazyLoad实现图片延迟加载-探究

JQuery LazyLoad实现图片延迟加载-探究

  
  本页的数据量一共300多行,也就是300多个图片,首次加载下,URL加载的请求只有6个,OK啦。

  继续往下浏览页面,在看看效果

  JQuery LazyLoad实现图片延迟加载-探究

  可以看到,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/

JQuery LazyLoad实现图片延迟加载-探究,布布扣,bubuko.com

JQuery LazyLoad实现图片延迟加载-探究

上一篇:Jquery获得select option的值 和对select option的操作


下一篇:转:Visual Studio进行Web性能测试- Part I