| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- define(function(require, exports, module) {
- "use strict";
- var Util = require('../util'),
- Base = require('../base');
- /**
- * A image lazyload plugin for xscroll.
- * @constructor
- * @param {object} cfg
- * @extends {Base}
- */
- var LazyLoad = function(cfg) {
- LazyLoad.superclass.constructor.call(this, cfg);
- this.userConfig = Util.mix({
- imgsSelector: "img",
- delay: 200,
- imgSetter: function(img) {
- var src = img.getAttribute("data-src");
- src && img.setAttribute("src", src);
- }
- }, cfg);
- }
- Util.extend(LazyLoad, Base, {
- /**
- * a pluginId
- * @memberOf LazyLoad
- * @type {string}
- */
- pluginId: "lazyload",
- /**
- * plugin initializer
- * @memberOf LazyLoad
- * @override Base
- * @return {LazyLoad}
- */
- pluginInitializer: function(xscroll) {
- var self = this;
- self.xscroll = xscroll;
- self.reset();
- self._bindEvt();
- return self;
- },
- pluginDestructor: function() {
- var self = this;
- if (self.xscroll) {
- self.xscroll.off("scroll scrollend afterrender", self._filterItem, self);
- }
- self._isEvtBinded = false;
- },
- _filterItem: function() {
- var self = this;
- if (self.xscroll.getPlugin("infinite")) {
- self._filterItemByInfinite.call(self);
- } else {
- self._filterItemByNormal.call(self);
- }
- },
- _filterItemByNormal: function() {
- var self = this,
- pos;
- var e = self.xscroll.getScrollPos();
- var __scrollTop = self.zoomType == "x" ? e.scrollLeft : e.scrollTop;
- var __offsetHeight = self.zoomType == "x" ? "offsetWidth" : "offsetHeight";
- var __top = self.zoomType == "x" ? "left" : "top";
- var __bottom = self.zoomType == "x" ? "right" : "bottom";
- for (var i = 0, l = self.positions.length; i < l; i++) {
- pos = self.positions[i];
- if ((pos[__top] >= __scrollTop && pos[__top] <= __scrollTop + self.xscroll.renderTo[__offsetHeight]) || (pos[__bottom] >= __scrollTop && pos[__bottom] <= __scrollTop + self.xscroll.renderTo[__offsetHeight])) {
- self.userConfig.imgSetter.call(self, self.imgs[i]);
- }
- }
- },
- _filterItemByInfinite: function() {
- var self = this,
- infinite = self.xscroll.getPlugin("infinite");
- clearTimeout(self._timeout);
- self._timeout = setTimeout(function() {
- if (self.xscroll['isScrolling' + self.zoomType.toUpperCase()]) return;
- for (var i = 0; i < infinite.infiniteLength; i++) {
- if (infinite.infiniteElementsCache[i]._visible && infinite.infiniteElements[i]) {
- var imgs = infinite.infiniteElements[i].querySelectorAll(self.userConfig.imgsSelector);
- for (var j = 0, l = imgs.length; j < l; j++) {
- self.userConfig.imgSetter.call(self, imgs[j]);
- }
- }
- }
- self._filterItemByNormal();
- }, self.userConfig.delay);
- },
- /**
- * reset the images
- * @memberOf LazyLoad
- * @override Base
- * @return {LazyLoad}
- */
- reset: function() {
- var self = this,
- img, rect;
- self.zoomType = self.xscroll.userConfig.zoomType;
- self.imgs = self.xscroll.renderTo.querySelectorAll(self.userConfig.imgsSelector);
- var e = self.xscroll.getScrollPos();
- var __top = self.zoomType == "x" ? "left" : "top";
- var __bottom = self.zoomType == "x" ? "right" : "bottom";
- var __getOffsetTop = self.zoomType == "x" ? Util.getOffsetLeft : Util.getOffsetTop;
- var __offsetHeight = self.zoomType == "x" ? "offsetWidth" : "offsetHeight";
- var __height = self.zoomType == "x" ? "width" : "height";
- self.positions = [];
- for (var i = 0, l = self.imgs.length; i < l; i++) {
- img = self.imgs[i];
- rect = {};
- rect[__top] = __getOffsetTop(img);
- rect[__height] = img[__offsetHeight];
- rect[__bottom] = rect[__top] + rect[__height];
- self.positions.push(rect);
- }
- return self;
- },
- _bindEvt: function() {
- var self = this;
- if (self._isEvtBinded) return;
- self._isEvtBinded = true;
- var eventType = self.xscroll.userConfig.useOriginScroll ? "scroll" : "scrollend";
- self.xscroll.on("afterrender", self._filterItem, self);
- self.xscroll.on(eventType, self._filterItem, self);
- }
- });
- if (typeof module == 'object' && module.exports) {
- module.exports = LazyLoad;
- }
- /** ignored by jsdoc **/
- else if (window.XScroll && window.XScroll.Plugins) {
- return XScroll.Plugins.LazyLoad = LazyLoad;
- }
- });
|