Merge pull request #4 from Schibsted-Tech-Polska/feature/performance_…

…optimization Feature/performance optimization
Schibsted-Tech-Polska · Oct 31, 2018 · 7910467 · 7910467
2 parents 24a07c5 + db00c79
commit 7910467
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -22,8 +22,16 @@ Additional event is emitted, when user scrolls up - it allows you to refresh ele
     // your callback for reloading element, i.e.
     reloadContent($element);
   });
-
-  AdRefresher.init($element);
+  
+  // default options
+  var options = {
+    loadingThreshold: 300,
+    reloadingThreshold: 150,
+    useReloading: true        // if set to false, it will disable reload event
+  }
+
+  // second parameter is optional
+  AdRefresher.init($element, options);
 ```
 
 ## Development

diff --git a/src/ad-refresher.js b/src/ad-refresher.js
@@ -16,31 +16,36 @@
         options = options || {};
         options.loadingThreshold = options.loadingThreshold || LOADING_AD_POSITION_THRESHOLD;
         options.reloadingThreshold = options.reloadingThreshold || RELOADING_AD_POSITION_THRESHOLD;
+        options.useReloading = options.useReloading || true;
 
-        var loader = new IntersectionObserver(function(entries) {
+        var loader = new IntersectionObserver(function(entries, observer) {
             entries.forEach(function(entry) {
                 if (entry.intersectionRatio > 0) {
                     entry.target.dispatchEvent(new Event('load-ad'));
+                    observer.disconnect();
                 }
             });
         }, {
             rootMargin: '0px 0px ' + options.loadingThreshold + 'px 0px'
         });
-        var reloader = new IntersectionObserver(function(entries) {
-            entries.forEach(function(entry) {
-                var currentY = entry.boundingClientRect.y;
-                var currentRatio = entry.intersectionRatio;
-                if (entry.isIntersecting && currentRatio >= lastRatio && currentY > lastY) {
-                    entry.target.dispatchEvent(new Event('reload-ad'));
-                }
-                lastY = currentY;
-                lastRatio = currentRatio;
-            });
-        }, {
-            rootMargin: options.reloadingThreshold + 'px 0px 00px 0px'
-        });
         loader.observe(element);
-        reloader.observe(element);
+
+        if (options.useReloading) {
+            var reloader = new IntersectionObserver(function(entries) {
+                entries.forEach(function(entry) {
+                    var currentY = entry.boundingClientRect.y;
+                    var currentRatio = entry.intersectionRatio;
+                    if (entry.isIntersecting && currentRatio >= lastRatio && currentY > lastY) {
+                        entry.target.dispatchEvent(new Event('reload-ad'));
+                    }
+                    lastY = currentY;
+                    lastRatio = currentRatio;
+                });
+            }, {
+                rootMargin: options.reloadingThreshold + 'px 0px 0px 0px'
+            });
+            reloader.observe(element);
+        }
     }
 
     var AdRefresher = {