[转]jquery实现图片延时加载
本文转自:http://www.cnblogs.com/wscdzl/archive/2012/09/03/2668838.html
原理:通过 jQuery 插件 lazyload 使得在浏览器可见区域外的图片不会被加载,当图片被用户滚动到浏览器可见区域时图片才进行加载,有点类似使用 Google 搜索图片时的效果。很明显,通过使用图片延时加载可以提高页面的加载速度。
实现过程:
首先是引入jquery文件和插件文件。jquery文件在这里我就不再赘述了。下面我贴出插件文件,我们将该文件命名为jquery.lazyload.js。
1 // JavaScript Document 2 /* 3 * Lazy Load - jQuery plugin for lazy loading images 4 * 5 * Copyright (c) 2007-2012 Mika Tuupola 6 * 7 * Licensed under the MIT license: 8 * http://www.opensource.org/licenses/mit-license.php 9 * 10 * Project home: 11 * http://www.appelsiini.net/projects/lazyload 12 * 13 * Version: 1.8.0 14 * 15 */ 16 (function($, window) { 17 var $window = $(window); 18 19 $.fn.lazyload = function(options) { 20 var elements = this; 21 var $container; 22 var settings = { 23 threshold : 0, 24 failure_limit : 0, 25 event : "scroll", 26 effect : "show", 27 container : window, 28 data_attribute : "original", 29 skip_invisible : true, 30 appear : null, 31 load : null 32 }; 33 34 function update() { 35 var counter = 0; 36 37 elements.each(function() { 38 var $this = $(this); 39 if (settings.skip_invisible && !$this.is(":visible")) { 40 return; 41 } 42 if ($.abovethetop(this, settings) || 43 $.leftofbegin(this, settings)) { 44 /* Nothing. */ 45 } else if (!$.belowthefold(this, settings) && 46 !$.rightoffold(this, settings)) { 47 $this.trigger("appear"); 48 } else { 49 if (++counter > settings.failure_limit) { 50 return false; 51 } 52 } 53 }); 54 55 } 56 57 if(options) { 58 /* Maintain BC for a couple of versions. */ 59 if (undefined !== options.failurelimit) { 60 options.failure_limit = options.failurelimit; 61 delete options.failurelimit; 62 } 63 if (undefined !== options.effectspeed) { 64 options.effect_speed = options.effectspeed; 65 delete options.effectspeed; 66 } 67 68 $.extend(settings, options); 69 } 70 71 /* Cache container as jQuery as object. */ 72 $container = (settings.container === undefined || 73 settings.container === window) ? $window : $(settings.container); 74 75 /* Fire one scroll event per scroll. Not one scroll event per image. */ 76 if (0 === settings.event.indexOf("scroll")) { 77 $container.bind(settings.event, function(event) { 78 return update(); 79 }); 80 } 81 82 this.each(function() { 83 var self = this; 84 var $self = $(self); 85 86 self.loaded = false; 87 88 /* When appear is triggered load original image. */ 89 $self.one("appear", function() { 90 if (!this.loaded) { 91 if (settings.appear) { 92 var elements_left = elements.length; 93 settings.appear.call(self, elements_left, settings); 94 } 95 $("<img />") 96 .bind("load", function() { 97 $self 98 .hide() 99 .attr("src", $self.data(settings.data_attribute)) 100 [settings.effect](settings.effect_speed); 101 self.loaded = true; 102 103 /* Remove image from array so it is not looped next time. */ 104 var temp = $.grep(elements, function(element) { 105 return !element.loaded; 106 }); 107 elements = $(temp); 108 109 if (settings.load) { 110 var elements_left = elements.length; 111 settings.load.call(self, elements_left, settings); 112 } 113 }) 114 .attr("src", $self.data(settings.data_attribute)); 115 } 116 }); 117 118 /* When wanted event is triggered load original image */ 119 /* by triggering appear. */ 120 if (0 !== settings.event.indexOf("scroll")) { 121 $self.bind(settings.event, function(event) { 122 if (!self.loaded) { 123 $self.trigger("appear"); 124 } 125 }); 126 } 127 }); 128 129 /* Check if something appears when window is resized. */ 130 $window.bind("resize", function(event) { 131 update(); 132 }); 133 134 /* Force initial check if images should appear. */ 135 update(); 136 137 return this; 138 }; 139 140 /* Convenience methods in jQuery namespace. */ 141 /* Use as $.belowthefold(element, {threshold : 100, container : window}) */ 142 143 $.belowthefold = function(element, settings) { 144 var fold; 145 146 if (settings.container === undefined || settings.container === window) { 147 fold = $window.height() + $window.scrollTop(); 148 } else { 149 fold = $(settings.container).offset().top + $(settings.container).height(); 150 } 151 152 return fold <= $(element).offset().top - settings.threshold; 153 }; 154 155 $.rightoffold = function(element, settings) { 156 var fold; 157 158 if (settings.container === undefined || settings.container === window) { 159 fold = $window.width() + $window.scrollLeft(); 160 } else { 161 fold = $(settings.container).offset().left + $(settings.container).width(); 162 } 163 164 return fold <= $(element).offset().left - settings.threshold; 165 }; 166 167 $.abovethetop = function(element, settings) { 168 var fold; 169 170 if (settings.container === undefined || settings.container === window) { 171 fold = $window.scrollTop(); 172 } else { 173 fold = $(settings.container).offset().top; 174 } 175 176 return fold >= $(element).offset().top + settings.threshold + $(element).height(); 177 }; 178 179 $.leftofbegin = function(element, settings) { 180 var fold; 181 182 if (settings.container === undefined || settings.container === window) { 183 fold = $window.scrollLeft(); 184 } else { 185 fold = $(settings.container).offset().left; 186 } 187 188 return fold >= $(element).offset().left + settings.threshold + $(element).width(); 189 }; 190 191 $.inviewport = function(element, settings) { 192 return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && 193 !$.belowthefold(element, settings) && !$.abovethetop(element, settings); 194 }; 195 196 /* Custom selectors for your convenience. */ 197 /* Use as $("img:below-the-fold").something() */ 198 199 $.extend($.expr[':'], { 200 "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); }, 201 "above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); }, 202 "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); }, 203 "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); }, 204 "in-viewport" : function(a) { return !$.inviewport(a, {threshold : 0}); }, 205 /* Maintain BC for couple of versions. */ 206 "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); }, 207 "right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); }, 208 "left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); } 209 }); 210 211 })(jQuery, window);
下面我们来看引入方式。
你必须改变你的HTML代码。将SRC
属性的占位符图像。演示页面使用1×1像素的灰度GIF 的真实图像的URL必须投入原始数据的
属性。
下面我们来看在html代码中需要书写些什么,这是调用方式。
1 <script type="text/javascript"> 2 $(document).ready(function() { 3 $("img").lazyload({ 4 effect: "fadeIn" 5 }); 6 }); 7 </script>
到这里,其实已经实现了我们想要的效果了,图片将会以 fadeIn 形式被载入。
但是,我们在这里还是不得不提一下,这个插件的其他的功能。
1.可以设置阀值来控制 灵敏度,下边代码把阀值设置成200 表明当图片没有看到之前先load 200像素。
1 $("img").lazyload({ threshold : 200 });
2.可以通过设置占位符图片和自定事件来触发加载图片事件
1 $("img").lazyload({ 2 placeholder: "img/grey.gif", event: "click" 3 });
3.事件触发加载,事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:
1 $("img").lazyload({ 2 placeholder: "img/grey.gif", event: "click" 3 });
延迟加载图片,Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.
1 $(function() { 2 $("img:below-the-fold").lazyload({ 3 placeholder: "img/grey.gif", 4 event: "sporty" 5 }); 6 }); 7 $(window).bind("load", function() { 8 var timeout = setTimeout(function() { 9 $("img").trigger("sporty") }, 5000); 10 });
更多的方法和资料,请参见官网http://www.appelsiini.net/projects/lazyload。
这里需要特别说明一下,jquery的版本不要太低哦,1.3的就不会出效果的。
这是我写的一个小demo,拿去参考一下还是极好的。
下载地址:https://files.cnblogs.com/wscdzl/demo.rar
posted on 2013-04-22 10:04 freeliver54 阅读(5780) 评论(2) 编辑 收藏 举报