devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

jquery.lazyload.js源码欣赏

作者：2023面试高手 | 2024-02-20 21:08:20

赞

踩

easylazyload.js源码

官方Github地址：https://github.com/tuupola/jquery_lazyload/

1.9.1版本 从.min.js中还原出 无注释

  1. (function($) {
  2. 	$.fn.lazyload = function(options) {
  3. 		var settings = {
  4. 			threshold: 0,
  5. 			failurelimit: 0,
  6. 			event: "scroll",
  7. 			effect: "show",
  8. 			container: window
  9. 		};
  10. 		if (options) {
  11. 			$.extend(settings, options)
  12. 		}
  13. 		var elements = this;
  14. 		if ("scroll" == settings.event) {
  15. 			$(settings.container).bind("scroll", function(event) {
  16. 				var counter = 0;
  17. 				elements.each(function() {
  18. 					if (!$.belowthefold(this, settings) && !$.rightoffold(this, settings)) {
  19. 						$(this).trigger("appear")
  20. 					} else {
  21. 						if (counter++ > settings.failurelimit) {
  22. 							return false
  23. 						}
  24. 					}
  25. 				});
  26. 				var temp = $.grep(elements, function(element) {
  27. 					return !element.loaded
  28. 				});
  29. 				elements = $(temp)
  30. 			})
  31. 		}
  32. 		return this.each(function() {
  33. 			var self = this;
  34. 			$(self).attr("original", $(self).attr("src"));
  35. 			if ("scroll" != settings.event || $.belowthefold(self, settings) || $.rightoffold(self, settings)) {
  36. 				if (settings.placeholder) {
  37. 					$(self).attr("src", settings.placeholder)
  38. 				} else {
  39. 					$(self).removeAttr("src")
  40. 				}
  41. 				self.loaded = false
  42. 			} else {
  43. 				self.loaded = true
  44. 			}
  45. 			$(self).one("appear", function() {
  46. 				if (!this.loaded) {
  47. 					$("<img />").bind("load", function() {
  48. 						$(self).hide().attr("src", $(self).attr("original"))[settings.effect](settings.effectspeed);
  49. 						self.loaded = true
  50. 					}).attr("src", $(self).attr("original"))
  51. 				}
  52. 			});
  53. 			if ("scroll" != settings.event) {
  54. 				$(self).bind(settings.event, function(event) {
  55. 					if (!self.loaded) {
  56. 						$(self).trigger("appear")
  57. 					}
  58. 				})
  59. 			}
  60. 		})
  61. 	};
  62. 	$.belowthefold = function(element, settings) {
  63. 		if (settings.container === undefined || settings.container === window) {
  64. 			var fold = $(window).height() + $(window).scrollTop()
  65. 		} else {
  66. 			var fold = $(settings.container).offset().top + $(settings.container).height()
  67. 		}
  68. 		return fold <= $(element).offset().top - settings.threshold
  69. 	};
  70. 	$.rightoffold = function(element, settings) {
  71. 		if (settings.container === undefined || settings.container === window) {
  72. 			var fold = $(window).width() + $(window).scrollLeft()
  73. 		} else {
  74. 			var fold = $(settings.container).offset().left + $(settings.container).width()
  75. 		}
  76. 		return fold <= $(element).offset().left - settings.threshold
  77. 	};
  78. 	$.extend($.expr[':'], {
  79. 		"below-the-fold": "$.belowthefold(a, {threshold : 0, container: window})",
  80. 		"above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})",
  81. 		"right-of-fold": "$.rightoffold(a, {threshold : 0, container: window})",
  82. 		"left-of-fold": "!$.rightoffold(a, {threshold : 0, container: window})"
  83. 	})
  84. })(jQuery);

1.9.3最新版 有注释 

  1. /*
  2.  * Lazy Load - jQuery plugin for lazy loading images
  3.  *
  4.  * Copyright (c) 2007-2013 Mika Tuupola
  5.  *
  6.  * Licensed under the MIT license:
  7.  *   http://www.opensource.org/licenses/mit-license.php
  8.  *
  9.  * Project home:
  10.  *   http://www.appelsiini.net/projects/lazyload
  11.  *
  12.  * Version:  1.9.3
  13.  *
  14.  */
  15.  
  16. (function($, window, document, undefined) {
  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.             placeholder     : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
  33.         };
  34.  
  35.         function update() {
  36.             var counter = 0;
  37.  
  38.             elements.each(function() {
  39.                 var $this = $(this);
  40.                 if (settings.skip_invisible && !$this.is(":visible")) {
  41.                     return;
  42.                 }
  43.                 if ($.abovethetop(this, settings) ||
  44.                     $.leftofbegin(this, settings)) {
  45.                         /* Nothing. */
  46.                 } else if (!$.belowthefold(this, settings) &&
  47.                     !$.rightoffold(this, settings)) {
  48.                         $this.trigger("appear");
  49.                         /* if we found an image we'll load, reset the counter */
  50.                         counter = 0;
  51.                 } else {
  52.                     if (++counter > settings.failure_limit) {
  53.                         return false;
  54.                     }
  55.                 }
  56.             });
  57.  
  58.         }
  59.  
  60.         if(options) {
  61.             /* Maintain BC for a couple of versions. */
  62.             if (undefined !== options.failurelimit) {
  63.                 options.failure_limit = options.failurelimit;
  64.                 delete options.failurelimit;
  65.             }
  66.             if (undefined !== options.effectspeed) {
  67.                 options.effect_speed = options.effectspeed;
  68.                 delete options.effectspeed;
  69.             }
  70.  
  71.             $.extend(settings, options);
  72.         }
  73.  
  74.         /* Cache container as jQuery as object. */
  75.         $container = (settings.container === undefined ||
  76.                       settings.container === window) ? $window : $(settings.container);
  77.  
  78.         /* Fire one scroll event per scroll. Not one scroll event per image. */
  79.         if (0 === settings.event.indexOf("scroll")) {
  80.             $container.bind(settings.event, function() {
  81.                 return update();
  82.             });
  83.         }
  84.  
  85.         this.each(function() {
  86.             var self = this;
  87.             var $self = $(self);
  88.  
  89.             self.loaded = false;
  90.  
  91.             /* If no src attribute given use data:uri. */
  92.             if ($self.attr("src") === undefined || $self.attr("src") === false) {
  93.                 if ($self.is("img")) {
  94.                     $self.attr("src", settings.placeholder);
  95.                 }
  96.             }
  97.  
  98.             /* When appear is triggered load original image. */
  99.             $self.one("appear", function() {
  100.                 if (!this.loaded) {
  101.                     if (settings.appear) {
  102.                         var elements_left = elements.length;
  103.                         settings.appear.call(self, elements_left, settings);
  104.                     }
  105.                     $("<img />")
  106.                         .bind("load", function() {
  107.  
  108.                             var original = $self.attr("data-" + settings.data_attribute);
  109.                             $self.hide();
  110.                             if ($self.is("img")) {
  111.                                 $self.attr("src", original);
  112.                             } else {
  113.                                 $self.css("background-image", "url('" + original + "')");
  114.                             }
  115.                             $self[settings.effect](settings.effect_speed);
  116.  
  117.                             self.loaded = true;
  118.  
  119.                             /* Remove image from array so it is not looped next time. */
  120.                             var temp = $.grep(elements, function(element) {
  121.                                 return !element.loaded;
  122.                             });
  123.                             elements = $(temp);
  124.  
  125.                             if (settings.load) {
  126.                                 var elements_left = elements.length;
  127.                                 settings.load.call(self, elements_left, settings);
  128.                             }
  129.                         })
  130.                         .attr("src", $self.attr("data-" + settings.data_attribute));
  131.                 }
  132.             });
  133.  
  134.             /* When wanted event is triggered load original image */
  135.             /* by triggering appear.                              */
  136.             if (0 !== settings.event.indexOf("scroll")) {
  137.                 $self.bind(settings.event, function() {
  138.                     if (!self.loaded) {
  139.                         $self.trigger("appear");
  140.                     }
  141.                 });
  142.             }
  143.         });
  144.  
  145.         /* Check if something appears when window is resized. */
  146.         $window.bind("resize", function() {
  147.             update();
  148.         });
  149.  
  150.         /* With IOS5 force loading images when navigating with back button. */
  151.         /* Non optimal workaround. */
  152.         if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) {
  153.             $window.bind("pageshow", function(event) {
  154.                 if (event.originalEvent && event.originalEvent.persisted) {
  155.                     elements.each(function() {
  156.                         $(this).trigger("appear");
  157.                     });
  158.                 }
  159.             });
  160.         }
  161.  
  162.         /* Force initial check if images should appear. */
  163.         $(document).ready(function() {
  164.             update();
  165.         });
  166.  
  167.         return this;
  168.     };
  169.  
  170.     /* Convenience methods in jQuery namespace.           */
  171.     /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
  172.  
  173.     $.belowthefold = function(element, settings) {
  174.         var fold;
  175.  
  176.         if (settings.container === undefined || settings.container === window) {
  177.             fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
  178.         } else {
  179.             fold = $(settings.container).offset().top + $(settings.container).height();
  180.         }
  181.  
  182.         return fold <= $(element).offset().top - settings.threshold;
  183.     };
  184.  
  185.     $.rightoffold = function(element, settings) {
  186.         var fold;
  187.  
  188.         if (settings.container === undefined || settings.container === window) {
  189.             fold = $window.width() + $window.scrollLeft();
  190.         } else {
  191.             fold = $(settings.container).offset().left + $(settings.container).width();
  192.         }
  193.  
  194.         return fold <= $(element).offset().left - settings.threshold;
  195.     };
  196.  
  197.     $.abovethetop = function(element, settings) {
  198.         var fold;
  199.  
  200.         if (settings.container === undefined || settings.container === window) {
  201.             fold = $window.scrollTop();
  202.         } else {
  203.             fold = $(settings.container).offset().top;
  204.         }
  205.  
  206.         return fold >= $(element).offset().top + settings.threshold  + $(element).height();
  207.     };
  208.  
  209.     $.leftofbegin = function(element, settings) {
  210.         var fold;
  211.  
  212.         if (settings.container === undefined || settings.container === window) {
  213.             fold = $window.scrollLeft();
  214.         } else {
  215.             fold = $(settings.container).offset().left;
  216.         }
  217.  
  218.         return fold >= $(element).offset().left + settings.threshold + $(element).width();
  219.     };
  220.  
  221.     $.inviewport = function(element, settings) {
  222.          return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
  223.                 !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
  224.      };
  225.  
  226.     /* Custom selectors for your convenience.   */
  227.     /* Use as $("img:below-the-fold").something() or */
  228.     /* $("img").filter(":below-the-fold").something() which is faster */
  229.  
  230.     $.extend($.expr[":"], {
  231.         "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
  232.         "above-the-top"  : function(a) { return !$.belowthefold(a, {threshold : 0}); },
  233.         "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
  234.         "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
  235.         "in-viewport"    : function(a) { return $.inviewport(a, {threshold : 0}); },
  236.         /* Maintain BC for couple of versions. */
  237.         "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
  238.         "right-of-fold"  : function(a) { return $.rightoffold(a, {threshold : 0}); },
  239.         "left-of-fold"   : function(a) { return !$.rightoffold(a, {threshold : 0}); }
  240.     });
  241.  
  242. })(jQuery, window, document);


版权声明：本文为博主原创文章，未经博主允许不得转载。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/120899
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号