jquery实现延时加载图片.docx

文章源至：/jquery.lazyload.js实现延时加载图片 ，实现网页分屏加载jquery.lazyload.js的实现原理是在图片的下载过程中中断图片的下载,把图片的src属性转换为orginal属性.然后页面滚动的时候到达临界点就再把orginal路径转换为src的路径 .在图片尺寸比较大的情况下，图片加载较慢，因此请求会被拦截，并且保留客户端数据，在下次Img标签加载Load方法的时候，可以继续请求图片数据。然而，多篇网上文章显示，该JS并不能真正减少http请求。 原因如下：图片一开始就有正确src，lazyLoad就算在快也快不过页面打开的http请求撒不信？可以到QiQiBoy那文章：JavaScript & images LazyLoad 图片延迟加载(伪lazyload)，打开Demo页面，用开发者工具看看图片有被下载不？其实还是下载了图片 也就是说http请求还是发送出去了,只不过在客户端lazyload人为的中断了图片的下载.这不是我需要的效果。于是我参考了改造jQuery lazyLoad插件一文，对jquery.lazyload.js进行一番修改。对前台的页面也要做一些修改。源码如下：html页面：$(body img).lazyload(effect : fadeIn);$(#shit).append().children().lazyload(effect : fadeIn);jquery.lazyload.js/* Lazy Load - jQuery plugin for lazy loading images* Copyright (c) 2007-2009 Mika Tuupola* Licensed under the MIT license:* /licenses/mit-license.php* Project home:* /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) $().bind(load, function() if ($(self).attr(original)$(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().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);原理：将图片真实地址保存在自定义属性original中，而src中仅存代替图片gary.gif。在加载的时候利用lazyload进行置换。同时我也考虑了动态加载图片的情况（如html文件中append的情况）。改造Jquery.LazyLoad.js函数，根据浏览器版本来显示不同的滤镜效果：varpublic=checkbrowse();varshoweffect=;if(publicis=msie&publicver8.0)showeffect=showelseshoweffect=fadeInjQuery(document).ready(function($)$(img).lazyload(placeholder:/themes/daniel/script/lazyload/grey.gif,effect:showeffect,failurelimit:10);Jquery.LazyLoad.js使用方法： 1、将以下文件存放在同一目录下面：jquery.jsjquery.layzload.jsgrey.gif2、在需要使用特效的地方加上如下的代码：Jquery.LazyLoad.js插件修正版下载： lazyload.rar Jquery.LazyLoad.js插件参数详解： 下面对LazyLoad插件的一些参数进行说明，供使用者做出更贴切的效果。1,用图片提前占位placeholder : img/grey.gif,参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏2,载入使用何种效果effect : fadeIn,参数：effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn3,提前开始加载threshold : 200,参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.4,事件触发时才加载event : click,参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar().可以实现鼠标莫过或点击图片才开始加载,后两个值未测试5,对某容器中的图片实现效果