diff options
author | Phil Hughes <me@iamphill.com> | 2017-10-31 20:18:09 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-10-31 20:18:09 +0300 |
commit | 1f60cd8cd74b530932aa84e4e6b9ad1b10891c0a (patch) | |
tree | 8dd110e4a71e1783c3f37dde585ed5d3a3671d03 /app | |
parent | b86c3a73655f858e9da60475058ff1387eb18798 (diff) |
Increase lazy loader performance
This stops the checkElementsInView method from running when there aren't any lazy load images on the page. By calling this method we are causing an unnecessary reflow which on large pages is a massive performance issue
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/lazy_loader.js | 15 |
1 files changed, 7 insertions, 8 deletions
diff --git a/app/assets/javascripts/lazy_loader.js b/app/assets/javascripts/lazy_loader.js index 3d64b121fa7..dbbf1637a47 100644 --- a/app/assets/javascripts/lazy_loader.js +++ b/app/assets/javascripts/lazy_loader.js @@ -1,5 +1,3 @@ -/* eslint-disable one-export, one-var, one-var-declaration-per-line */ - import _ from 'underscore'; export const placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; @@ -21,7 +19,10 @@ export default class LazyLoader { } searchLazyImages() { this.lazyImages = [].slice.call(document.querySelectorAll('.lazy')); - this.checkElementsInView(); + + if (this.lazyImages.length) { + this.checkElementsInView(); + } } startContentObserver() { const contentNode = document.querySelector(this.observerNode) || document.querySelector('body'); @@ -45,15 +46,13 @@ export default class LazyLoader { checkElementsInView() { const scrollTop = pageYOffset; const visHeight = scrollTop + innerHeight + SCROLL_THRESHOLD; - let imgBoundRect, imgTop, imgBound; // Loading Images which are in the current viewport or close to them this.lazyImages = this.lazyImages.filter((selectedImage) => { if (selectedImage.getAttribute('data-src')) { - imgBoundRect = selectedImage.getBoundingClientRect(); - - imgTop = scrollTop + imgBoundRect.top; - imgBound = imgTop + imgBoundRect.height; + const imgBoundRect = selectedImage.getBoundingClientRect(); + const imgTop = scrollTop + imgBoundRect.top; + const imgBound = imgTop + imgBoundRect.height; if (scrollTop < imgBound && visHeight > imgTop) { LazyLoader.loadImage(selectedImage); |