Added a cleanup method to Imager prototype

Imager.js

@@ -14,6 +14,19 @@
  }
  })();
 
+ var removeEvent = (function () {
+ if (document.removeEventListener) {
+ return function removeStandardEventListener(el, eventName, fn) {
+ return el.removeEventListener(eventName, fn, false);
+ };
+ }
+ else {
+ return function removeIEEventListener(el, eventName, fn) {
+ return el.detachEvent('on' + eventName, fn);
+ };
+ }
+ })();
+
  var defaultWidths = [96, 130, 165, 200, 235, 270, 304, 340, 375, 410, 445, 485, 520, 555, 590, 625, 660, 695, 736];
 
  var getKeys = typeof Object.keys === 'function' ? Object.keys : function (object) {
@@ -144,6 +157,8 @@
  }
 
  this.divs = [];
+ this.scrollListeners = [];
+ this.resizeListeners = [];
  this.add(elements || this.selector);
  this.ready(opts.onReady);
 
@@ -424,9 +439,12 @@
  Imager.prototype.registerResizeEvent = function (filterFn) {
  var self = this;
 
- addEvent(window, 'resize', debounce(function () {
+ var resizeListener = debounce(function () {
  self.checkImagesNeedReplacing(self.divs, filterFn);
- }, 100));
+ }, 100);
+
+ addEvent(window, 'resize', resizeListener);
+ this.resizeListeners.push(resizeListener);
  };
 
  Imager.prototype.registerScrollEvent = function () {
@@ -438,14 +456,37 @@
  self.scrollCheck();
  }, self.scrollDelay);
 
- addEvent(window, 'scroll', function () {
+ var onScroll = function () {
  self.scrolled = true;
- });
+ };
 
- addEvent(window, 'resize', function () {
+ var onResize = function () {
  self.viewportHeight = document.documentElement.clientHeight;
  self.scrolled = true;
- });
+ };
+
+ addEvent(window, 'scroll', onScroll);
+ addEvent(window, 'resize', onResize);
+
+ this.scrollListeners.push(onScroll);
+ this.resizeListeners.push(onResize);
+ };
+
+ Imager.prototype.cleanup = function () {
+ applyEach(this.resizeListeners, function(listener) {
+ removeEvent(window, 'resize', listener);
+ });
+ applyEach(this.scrollListeners, function(listener) {
+ removeEvent(window, 'scroll', listener);
+ });
+
+ if(this.interval) {
+ window.clearInterval(this.interval);
+ }
+
+ this.resizeListeners = [];
+ this.scrollListeners = [];
+ this.interval = null;
  };
 
  Imager.getPageOffsetGenerator = function getPageVerticalOffset(testCase) {

test/fixtures/cleanup.html

@@ -0,0 +1,4 @@
+<div class="delayed-image-load" data-src="base/test/fixtures/media/A-320.jpg"></div>
+<div class="delayed-image-load" data-src="base/test/fixtures/media/B-320.jpg"></div>
+<div class="delayed-image-load" data-src="base/test/fixtures/media/B-640.jpg"></div>
+<div class="delayed-image-load" data-src="base/test/fixtures/media/C-320.jpg"></div>

test/unit/core.js

@@ -231,6 +231,74 @@ describe('Imager.js', function () {
  });
  });
 
+ describe('cleanup', function() {
+ var removeEvtStub, getExpectedEvtName;
+
+ beforeEach(function() {
+ if(document.removeEventListener) {
+ removeEvtStub = sandbox.stub(window, 'removeEventListener');
+ getExpectedEvtName = function(name) {
+ return name;
+ };
+
+ } else {
+ removeEvtStub = sandbox.stub(window, 'detachEvent');
+ getExpectedEvtName = function(name) {
+ return 'on' + name;
+ };
+ }
+ });
+
+ it('should cleanup after using onResize option', function(done) {
+ fixtures = loadFixtures('cleanup');
+ var imgr = new Imager({
+ onResize: true
+ });
+ imgr.ready(function () {
+ expect(imgr.resizeListeners.length).to.be(1);
+ expect(imgr.scrollListeners.length).to.be(0);
+
+ imgr.cleanup();
+
+ expect(imgr.resizeListeners.length).to.be(0);
+ expect(imgr.scrollListeners.length).to.be(0);
+
+ expect(removeEvtStub.called).to.be(true);
+ expect(removeEvtStub.callCount).to.be(1);
+ expect(removeEvtStub.firstCall.args[0]).to.be(getExpectedEvtName('resize'));
+ done();
+ });
+ });
+
+ it('should cleanup after using lazyload option', function(done) {
+ sandbox.stub(window, 'clearInterval');
+ fixtures = loadFixtures('cleanup');
+ var imgr = new Imager({
+ lazyload: true
+ });
+ imgr.ready(function () {
+ expect(imgr.resizeListeners.length).to.be(2);
+ expect(imgr.scrollListeners.length).to.be(1);
+ expect(imgr.interval).to.be.defined;
+
+ imgr.cleanup();
+
+ expect(imgr.resizeListeners.length).to.be(0);
+ expect(imgr.scrollListeners.length).to.be(0);
+ expect(imgr.interval).to.be.null;
+
+ expect(removeEvtStub.called).to.be(true);
+ expect(removeEvtStub.callCount).to.be(3);
+ expect(removeEvtStub.firstCall.args[0]).to.be(getExpectedEvtName('resize'));
+ expect(removeEvtStub.secondCall.args[0]).to.be(getExpectedEvtName('resize'));
+ expect(removeEvtStub.thirdCall.args[0]).to.be(getExpectedEvtName('scroll'));
+ expect(window.clearInterval.called).to.be(true);
+
+ done();
+ });
+ });
+ });
+
  describe('isThisElementOnScreen', function(){
  var offsetStub, imgr;