Commit e457f3fb authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'lazy-load-check-when-has-images' into 'master'

Increase lazy loader performance

See merge request gitlab-org/gitlab-ce!15114
parents 73001627 1f60cd8c
/* eslint-disable one-export, one-var, one-var-declaration-per-line */
import _ from 'underscore'; import _ from 'underscore';
export const placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; export const placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
...@@ -21,7 +19,10 @@ export default class LazyLoader { ...@@ -21,7 +19,10 @@ export default class LazyLoader {
} }
searchLazyImages() { searchLazyImages() {
this.lazyImages = [].slice.call(document.querySelectorAll('.lazy')); this.lazyImages = [].slice.call(document.querySelectorAll('.lazy'));
this.checkElementsInView();
if (this.lazyImages.length) {
this.checkElementsInView();
}
} }
startContentObserver() { startContentObserver() {
const contentNode = document.querySelector(this.observerNode) || document.querySelector('body'); const contentNode = document.querySelector(this.observerNode) || document.querySelector('body');
...@@ -45,15 +46,13 @@ export default class LazyLoader { ...@@ -45,15 +46,13 @@ export default class LazyLoader {
checkElementsInView() { checkElementsInView() {
const scrollTop = pageYOffset; const scrollTop = pageYOffset;
const visHeight = scrollTop + innerHeight + SCROLL_THRESHOLD; const visHeight = scrollTop + innerHeight + SCROLL_THRESHOLD;
let imgBoundRect, imgTop, imgBound;
// Loading Images which are in the current viewport or close to them // Loading Images which are in the current viewport or close to them
this.lazyImages = this.lazyImages.filter((selectedImage) => { this.lazyImages = this.lazyImages.filter((selectedImage) => {
if (selectedImage.getAttribute('data-src')) { if (selectedImage.getAttribute('data-src')) {
imgBoundRect = selectedImage.getBoundingClientRect(); const imgBoundRect = selectedImage.getBoundingClientRect();
const imgTop = scrollTop + imgBoundRect.top;
imgTop = scrollTop + imgBoundRect.top; const imgBound = imgTop + imgBoundRect.height;
imgBound = imgTop + imgBoundRect.height;
if (scrollTop < imgBound && visHeight > imgTop) { if (scrollTop < imgBound && visHeight > imgTop) {
LazyLoader.loadImage(selectedImage); LazyLoader.loadImage(selectedImage);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment