diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-11-01 13:03:07 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-11-01 13:03:07 +0300 |
commit | e457f3fbffddb84357e9449c66c2af675fbb526b (patch) | |
tree | 7bc8ab9f1b5b3d9824cc308712fb7ae494e10098 /app | |
parent | 7300162727b15e8daccd2d0214b2ca527c6c9f55 (diff) | |
parent | 1f60cd8cd74b530932aa84e4e6b9ad1b10891c0a (diff) |
Merge branch 'lazy-load-check-when-has-images' into 'master'
Increase lazy loader performance
See merge request gitlab-org/gitlab-ce!15114
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); |