Commit 1f60cd8c authored by Phil Hughes's avatar Phil Hughes

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
parent b86c3a73
/* 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