jquery.lazyload.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. /*
  2. * Lazy Load - jQuery plugin for lazy loading images
  3. *
  4. * Copyright (c) 2007-2009 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.5.0
  13. *
  14. */
  15. (function ($) {
  16. $.fn.lazyload = function (options) {
  17. var settings = {
  18. threshold: 0,
  19. failurelimit: 0,
  20. event: "scroll",
  21. effect: "show",
  22. container: window
  23. };
  24. if (options) {
  25. $.extend(settings, options);
  26. }
  27. /* Fire one scroll event per scroll. Not one scroll event per image. */
  28. var elements = this;
  29. if ("scroll" == settings.event) {
  30. $(settings.container).bind("scroll", function (event) {
  31. var counter = 0;
  32. elements.each(function () {
  33. if ($.abovethetop(this, settings) || $.leftofbegin(this, settings)) {
  34. /* Nothing. */
  35. } else if (!$.belowthefold(this, settings) && !$.rightoffold(this, settings)) {
  36. $(this).trigger("appear");
  37. } else {
  38. if (counter++ > settings.failurelimit) {
  39. return false;
  40. }
  41. }
  42. });
  43. /* Remove image from array so it is not looped next time. */
  44. var temp = $.grep(elements, function (element) {
  45. return !element.loaded;
  46. });
  47. elements = $(temp);
  48. });
  49. }
  50. this.each(function () {
  51. var self = this;
  52. /* When appear is triggered load original image. */
  53. $(self).one("appear", function () {
  54. if (!this.loaded) {
  55. $("<img />")
  56. .bind("load", function () {
  57. $(self)
  58. .hide()
  59. .attr("src", $(self).attr("original"))
  60. //.attr("class", '')
  61. .removeClass("lazy") //DT 2013/7/26
  62. [settings.effect](settings.effectspeed);
  63. self.loaded = true;
  64. //DT 2012/11/15
  65. if(typeof img_max_width != 'undefined') {
  66. if(self.width == 1) {//FIX IE6
  67. self.onload = function() {
  68. if(self.width > img_max_width) {
  69. self.height = parseInt(self.height*img_max_width/self.width);
  70. self.width = img_max_width;
  71. self.onclick = function (e) {window.open(DTPath+'api/view.php?img='+self.src);}
  72. self.title = L['click_open'];
  73. }
  74. }
  75. } else {
  76. if(self.width > img_max_width) {
  77. self.height = parseInt(self.height*img_max_width/self.width);
  78. self.width = img_max_width;
  79. self.onclick = function (e) {window.open(DTPath+'api/view.php?img='+self.src);}
  80. self.title = L['click_open'];
  81. }
  82. }
  83. }
  84. })
  85. .attr("src", $(self).attr("original"));
  86. };
  87. });
  88. /* When wanted event is triggered load original image */
  89. /* by triggering appear. */
  90. if ("scroll" != settings.event) {
  91. $(self).bind(settings.event, function (event) {
  92. if (!self.loaded) {
  93. $(self).trigger("appear");
  94. }
  95. });
  96. }
  97. });
  98. /* Force initial check if images should appear. */
  99. $(settings.container).trigger(settings.event);
  100. return this;
  101. };
  102. /* Convenience methods in jQuery namespace. */
  103. /* Use as $.belowthefold(element, {threshold : 100, container : window}) */
  104. $.belowthefold = function (element, settings) {
  105. if (settings.container === undefined || settings.container === window) {
  106. var fold = $(window).height() + $(window).scrollTop();
  107. } else {
  108. var fold = $(settings.container).offset().top + $(settings.container).height();
  109. }
  110. return fold <= $(element).offset().top - settings.threshold;
  111. };
  112. $.rightoffold = function (element, settings) {
  113. if (settings.container === undefined || settings.container === window) {
  114. var fold = $(window).width() + $(window).scrollLeft();
  115. } else {
  116. var fold = $(settings.container).offset().left + $(settings.container).width();
  117. }
  118. return fold <= $(element).offset().left - settings.threshold;
  119. };
  120. $.abovethetop = function (element, settings) {
  121. if (settings.container === undefined || settings.container === window) {
  122. var fold = $(window).scrollTop();
  123. } else {
  124. var fold = $(settings.container).offset().top;
  125. }
  126. return fold >= $(element).offset().top + settings.threshold + $(element).height();
  127. };
  128. $.leftofbegin = function (element, settings) {
  129. if (settings.container === undefined || settings.container === window) {
  130. var fold = $(window).scrollLeft();
  131. } else {
  132. var fold = $(settings.container).offset().left;
  133. }
  134. return fold >= $(element).offset().left + settings.threshold + $(element).width();
  135. };
  136. /* Custom selectors for your convenience. */
  137. /* Use as $("img:below-the-fold").something() */
  138. $.extend($.expr[':'], {
  139. "below-the-fold": "$.belowthefold(a, {threshold : 0, container: window})",
  140. "above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})",
  141. "right-of-fold": "$.rightoffold(a, {threshold : 0, container: window})",
  142. "left-of-fold": "!$.rightoffold(a, {threshold : 0, container: window})"
  143. });
  144. })(jQuery);