lazyload.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. define(function(require, exports, module) {
  2. "use strict";
  3. var Util = require('../util'),
  4. Base = require('../base');
  5. /**
  6. * A image lazyload plugin for xscroll.
  7. * @constructor
  8. * @param {object} cfg
  9. * @extends {Base}
  10. */
  11. var LazyLoad = function(cfg) {
  12. LazyLoad.superclass.constructor.call(this, cfg);
  13. this.userConfig = Util.mix({
  14. imgsSelector: "img",
  15. delay: 200,
  16. imgSetter: function(img) {
  17. var src = img.getAttribute("data-src");
  18. src && img.setAttribute("src", src);
  19. }
  20. }, cfg);
  21. }
  22. Util.extend(LazyLoad, Base, {
  23. /**
  24. * a pluginId
  25. * @memberOf LazyLoad
  26. * @type {string}
  27. */
  28. pluginId: "lazyload",
  29. /**
  30. * plugin initializer
  31. * @memberOf LazyLoad
  32. * @override Base
  33. * @return {LazyLoad}
  34. */
  35. pluginInitializer: function(xscroll) {
  36. var self = this;
  37. self.xscroll = xscroll;
  38. self.reset();
  39. self._bindEvt();
  40. return self;
  41. },
  42. pluginDestructor: function() {
  43. var self = this;
  44. if (self.xscroll) {
  45. self.xscroll.off("scroll scrollend afterrender", self._filterItem, self);
  46. }
  47. self._isEvtBinded = false;
  48. },
  49. _filterItem: function() {
  50. var self = this;
  51. if (self.xscroll.getPlugin("infinite")) {
  52. self._filterItemByInfinite.call(self);
  53. } else {
  54. self._filterItemByNormal.call(self);
  55. }
  56. },
  57. _filterItemByNormal: function() {
  58. var self = this,
  59. pos;
  60. var e = self.xscroll.getScrollPos();
  61. var __scrollTop = self.zoomType == "x" ? e.scrollLeft : e.scrollTop;
  62. var __offsetHeight = self.zoomType == "x" ? "offsetWidth" : "offsetHeight";
  63. var __top = self.zoomType == "x" ? "left" : "top";
  64. var __bottom = self.zoomType == "x" ? "right" : "bottom";
  65. for (var i = 0, l = self.positions.length; i < l; i++) {
  66. pos = self.positions[i];
  67. if ((pos[__top] >= __scrollTop && pos[__top] <= __scrollTop + self.xscroll.renderTo[__offsetHeight]) || (pos[__bottom] >= __scrollTop && pos[__bottom] <= __scrollTop + self.xscroll.renderTo[__offsetHeight])) {
  68. self.userConfig.imgSetter.call(self, self.imgs[i]);
  69. }
  70. }
  71. },
  72. _filterItemByInfinite: function() {
  73. var self = this,
  74. infinite = self.xscroll.getPlugin("infinite");
  75. clearTimeout(self._timeout);
  76. self._timeout = setTimeout(function() {
  77. if (self.xscroll['isScrolling' + self.zoomType.toUpperCase()]) return;
  78. for (var i = 0; i < infinite.infiniteLength; i++) {
  79. if (infinite.infiniteElementsCache[i]._visible && infinite.infiniteElements[i]) {
  80. var imgs = infinite.infiniteElements[i].querySelectorAll(self.userConfig.imgsSelector);
  81. for (var j = 0, l = imgs.length; j < l; j++) {
  82. self.userConfig.imgSetter.call(self, imgs[j]);
  83. }
  84. }
  85. }
  86. self._filterItemByNormal();
  87. }, self.userConfig.delay);
  88. },
  89. /**
  90. * reset the images
  91. * @memberOf LazyLoad
  92. * @override Base
  93. * @return {LazyLoad}
  94. */
  95. reset: function() {
  96. var self = this,
  97. img, rect;
  98. self.zoomType = self.xscroll.userConfig.zoomType;
  99. self.imgs = self.xscroll.renderTo.querySelectorAll(self.userConfig.imgsSelector);
  100. var e = self.xscroll.getScrollPos();
  101. var __top = self.zoomType == "x" ? "left" : "top";
  102. var __bottom = self.zoomType == "x" ? "right" : "bottom";
  103. var __getOffsetTop = self.zoomType == "x" ? Util.getOffsetLeft : Util.getOffsetTop;
  104. var __offsetHeight = self.zoomType == "x" ? "offsetWidth" : "offsetHeight";
  105. var __height = self.zoomType == "x" ? "width" : "height";
  106. self.positions = [];
  107. for (var i = 0, l = self.imgs.length; i < l; i++) {
  108. img = self.imgs[i];
  109. rect = {};
  110. rect[__top] = __getOffsetTop(img);
  111. rect[__height] = img[__offsetHeight];
  112. rect[__bottom] = rect[__top] + rect[__height];
  113. self.positions.push(rect);
  114. }
  115. return self;
  116. },
  117. _bindEvt: function() {
  118. var self = this;
  119. if (self._isEvtBinded) return;
  120. self._isEvtBinded = true;
  121. var eventType = self.xscroll.userConfig.useOriginScroll ? "scroll" : "scrollend";
  122. self.xscroll.on("afterrender", self._filterItem, self);
  123. self.xscroll.on(eventType, self._filterItem, self);
  124. }
  125. });
  126. if (typeof module == 'object' && module.exports) {
  127. module.exports = LazyLoad;
  128. }
  129. /** ignored by jsdoc **/
  130. else if (window.XScroll && window.XScroll.Plugins) {
  131. return XScroll.Plugins.LazyLoad = LazyLoad;
  132. }
  133. });