optimize offset helper (uses getBoundingClientRect now)

callmecavs · Jul 10, 2015 · 68e9d86 · 68e9d86
1 parent ee110ae
commit 68e9d86
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 41 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name":        "layzr.js",
-  "version":     "1.4.1",
+  "version":     "1.4.2",
   "description": "A small, fast, modern, and dependency-free library for lazy loading.",
   "homepage":    "http://callmecavs.github.io/layzr.js/",
   "main":        ["dist/layzr.js"],

diff --git a/dist/layzr.js b/dist/layzr.js
@@ -1,5 +1,5 @@
 /*!
- * Layzr.js 1.4.0 - A small, fast, modern, and dependency-free library for lazy loading.
+ * Layzr.js 1.4.2 - A small, fast, modern, and dependency-free library for lazy loading.
  * Copyright (c) 2015 Michael Cavalea - http://callmecavs.github.io/layzr.js/
  * License: MIT
  */
@@ -50,7 +50,7 @@ function Layzr(options) {
 
 Layzr.prototype._requestScroll = function() {
   if(this._optionsContainer === window) {
-    this._lastScroll = window.scrollY || window.pageYOffset;
+    this._lastScroll = window.pageYOffset;
   }
   else {
     this._lastScroll = this._optionsContainer.scrollTop + this._getOffset(this._optionsContainer);
@@ -67,18 +67,10 @@ Layzr.prototype._requestTick = function() {
 };
 
 // OFFSET HELPER
-// borrowed from: http://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document
+// remember, getBoundingClientRect is relative to the viewport
 
-Layzr.prototype._getOffset = function(element) {
-  var offsetTop = 0;
-
-  do {
-    if(!isNaN(element.offsetTop)) {
-      offsetTop += element.offsetTop;
-    }
-  } while(element = element.offsetParent);
-
-  return offsetTop;
+Layzr.prototype._getOffset = function(node) {
+  return node.getBoundingClientRect().top + window.pageYOffset;
 };
 
 // HEIGHT HELPER
@@ -113,15 +105,15 @@ Layzr.prototype._inViewport = function(node) {
   var viewportBottom = viewportTop + this._getContainerHeight();
 
   // get node top and bottom offset
-  var elementTop = this._getOffset(node);
-  var elementBottom = elementTop + this._getContainerHeight();
+  var nodeTop = this._getOffset(node);
+  var nodeBottom = nodeTop + this._getContainerHeight();
 
   // calculate threshold, convert percentage to pixel value
   var threshold = (this._optionsThreshold / 100) * window.innerHeight;
 
-  // return if element in viewport
-  return elementBottom >= viewportTop - threshold
-      && elementTop <= viewportBottom + threshold
+  // return if node in viewport
+  return nodeBottom >= viewportTop - threshold
+      && nodeTop <= viewportBottom + threshold
       && !node.hasAttribute(this._optionsAttrHidden);
 };
 
@@ -151,7 +143,7 @@ Layzr.prototype._reveal = function(node) {
 };
 
 Layzr.prototype.updateSelector = function() {
-  // update cached list of elements matching selector
+  // update cached list of nodes matching selector
   this._nodes = document.querySelectorAll(this._optionsSelector);
 };
 

diff --git a/dist/layzr.min.js b/dist/layzr.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name":        "layzr.js",
-  "version":     "1.4.1",
+  "version":     "1.4.2",
   "description": "A small, fast, modern, and dependency-free library for lazy loading.",
   "homepage":    "http://callmecavs.github.io/layzr.js/",
   "main":        "dist/layzr.js",

diff --git a/src/layzr.js b/src/layzr.js
@@ -35,7 +35,7 @@ function Layzr(options) {
 
 Layzr.prototype._requestScroll = function() {
   if(this._optionsContainer === window) {
-    this._lastScroll = window.scrollY || window.pageYOffset;
+    this._lastScroll = window.pageYOffset;
   }
   else {
     this._lastScroll = this._optionsContainer.scrollTop + this._getOffset(this._optionsContainer);
@@ -52,18 +52,10 @@ Layzr.prototype._requestTick = function() {
 };
 
 // OFFSET HELPER
-// borrowed from: http://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document
+// remember, getBoundingClientRect is relative to the viewport
 
-Layzr.prototype._getOffset = function(element) {
-  var offsetTop = 0;
-
-  do {
-    if(!isNaN(element.offsetTop)) {
-      offsetTop += element.offsetTop;
-    }
-  } while(element = element.offsetParent);
-
-  return offsetTop;
+Layzr.prototype._getOffset = function(node) {
+  return node.getBoundingClientRect().top + window.pageYOffset;
 };
 
 // HEIGHT HELPER
@@ -98,15 +90,15 @@ Layzr.prototype._inViewport = function(node) {
   var viewportBottom = viewportTop + this._getContainerHeight();
 
   // get node top and bottom offset
-  var elementTop = this._getOffset(node);
-  var elementBottom = elementTop + this._getContainerHeight();
+  var nodeTop = this._getOffset(node);
+  var nodeBottom = nodeTop + this._getContainerHeight();
 
   // calculate threshold, convert percentage to pixel value
   var threshold = (this._optionsThreshold / 100) * window.innerHeight;
 
-  // return if element in viewport
-  return elementBottom >= viewportTop - threshold
-      && elementTop <= viewportBottom + threshold
+  // return if node in viewport
+  return nodeBottom >= viewportTop - threshold
+      && nodeTop <= viewportBottom + threshold
       && !node.hasAttribute(this._optionsAttrHidden);
 };
 
@@ -136,7 +128,7 @@ Layzr.prototype._reveal = function(node) {
 };
 
 Layzr.prototype.updateSelector = function() {
-  // update cached list of elements matching selector
+  // update cached list of nodes matching selector
   this._nodes = document.querySelectorAll(this._optionsSelector);
 };