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页面： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript" src="Js/lazyload/jquery.js"></script> <script type="text/javascript" src="Js/lazyload/mmm_lazyload.js"></script> </head> <body> <div id="shit"></div> <div><img original="images/e5a78a1f3227104e304e15a8.jpg" src="Js/lazyload/grey.gif" height="25%" \></div> <div><img original="images/c120e3ee2bf73a052cf534ed.jpg" src="Js/lazyload/grey.gif" height="25%" \></div> <div><img original="images/9020214e32849b27b2de051b.jpg" src="Js/lazyload/grey.gif" height="25%" \></div> <div><img original="images/8463083eb006e50c70cf6cd1.jpg" src="Js/lazyload/grey.gif" height="25%" \></div> <div><img original="images/199341d118c4286d9a5027d0.jpg" src="Js/lazyload/grey.gif" height="25%" \></div> <div><img original="images/9816f235e7812b4d91ef3949.jpg" src="Js/lazyload/grey.gif" height="25%" \></div> <div><img original="images/明美入浴图副本B.jpg" src="Js/lazyload/grey.gif" height="25%" \></div> <div><img original="images/骑马少女（完成稿）大.jpg" src="Js/lazyload/grey.gif" height="25%" \></div> <div><img original="images/天空的学校.jpg" src="Js/lazyload/grey.gif" height="25%" \></div> <div><img original="images/旗袍林明美最终版.jpg" src="Js/lazyload/grey.gif" height="25%" \></div> <div><img original="images/e5a78a1f3227104e304e15a8.jpg" src="Js/lazyload/grey.gif" height="25%" \></div> <div><img original="images/e5a78a1f3227104e304e15a8.jpg" src="Js/lazyload/grey.gif" height="25%" \></div> <script> $("body img").lazyload({ effect : "fadeIn" }); $("#shit").append('<img original="images/9020214e32849b27b2de051b.jpg" src="Js/lazyload/grey.gif" height="25%" \>') .children().lazyload({ effect : "fadeIn" }); </script> </body> </html> jquery.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: * * * 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) { $("<img />").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().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); 原理：将图片真实地址保存在自定义属性original中，而src中仅存代替图片gary.gif。在加载的时候利用lazyload进行置换。同时我也考虑了动态加载图片的情况（如html文件中append的情况）。改造Jquery.LazyLoad.js函数，根据浏览器版本来显示不同的滤镜效果： var public = checkbrowse(); var showeffect = ""; if ((public['is'] == 'msie' && public['ver'] < 8.0)) { showeffect = "show" } else { showeffect = "fadeIn" } jQuery(document).ready(function($) { $("img").lazyload({ placeholder: " effect: showeffect, failurelimit: 10 }) }); Jquery.LazyLoad.js使用方法： 1、将以下文件存放在同一目录下面： jquery.js jquery.layzload.js grey.gif 2、在需要使用特效的地方加上如下的代码： <script type="text/javascript" src="/ <script type="text/javascript" src=" Jquery.LazyLoad.js插件修正版下载： lazyload.rar Jquery.LazyLoad.js插件参数详解：下面对LazyLoad插件的一些参数进行说明，供使用者做出更贴切的效果。 1,用图片提前占位 placeholder : "img/grey.gif", 参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏 2,载入使用何种效果 effect : "fadeIn", 参数：effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn 3,提前开始加载 threshold : 200, 参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉. 4,事件触发时才加载 event : "click", 参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试… 5,对某容器中的图片实现效果 container: $("#container"), 参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片 6,图片排序混乱时 failurelimit : 10, 参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.

展开阅读全文