diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-09 12:09:27 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-09 12:09:27 +0300 |
commit | c3b45354d720654215eb0e7b8e718ba6ea2d7a96 (patch) | |
tree | 359066e91bad08ae8e404bb43316705b7b53993e /app/assets/javascripts/lazy_loader.js | |
parent | 734708924b0f86ad3c23636bd6a8942d679daaf2 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/lazy_loader.js')
-rw-r--r-- | app/assets/javascripts/lazy_loader.js | 29 |
1 files changed, 17 insertions, 12 deletions
diff --git a/app/assets/javascripts/lazy_loader.js b/app/assets/javascripts/lazy_loader.js index 75542267f37..aa7fe087678 100644 --- a/app/assets/javascripts/lazy_loader.js +++ b/app/assets/javascripts/lazy_loader.js @@ -14,6 +14,10 @@ export default class LazyLoader { scrollContainer.addEventListener('load', () => this.register()); } + static supportsNativeLazyLoading() { + return 'loading' in HTMLImageElement.prototype; + } + static supportsIntersectionObserver() { return Boolean(window.IntersectionObserver); } @@ -23,7 +27,9 @@ export default class LazyLoader { () => { const lazyImages = [].slice.call(document.querySelectorAll('.lazy')); - if (LazyLoader.supportsIntersectionObserver()) { + if (LazyLoader.supportsNativeLazyLoading()) { + lazyImages.forEach(img => LazyLoader.loadImage(img)); + } else if (LazyLoader.supportsIntersectionObserver()) { if (this.intersectionObserver) { lazyImages.forEach(img => this.intersectionObserver.observe(img)); } @@ -72,11 +78,14 @@ export default class LazyLoader { } register() { - if (LazyLoader.supportsIntersectionObserver()) { - this.startIntersectionObserver(); - } else { - this.startLegacyObserver(); + if (!LazyLoader.supportsNativeLazyLoading()) { + if (LazyLoader.supportsIntersectionObserver()) { + this.startIntersectionObserver(); + } else { + this.startLegacyObserver(); + } } + this.startContentObserver(); this.searchLazyImages(); } @@ -148,16 +157,12 @@ export default class LazyLoader { static loadImage(img) { if (img.getAttribute('data-src')) { + img.setAttribute('loading', 'lazy'); let imgUrl = img.getAttribute('data-src'); // Only adding width + height for avatars for now if (imgUrl.indexOf('/avatar/') > -1 && imgUrl.indexOf('?') === -1) { - let targetWidth = null; - if (img.getAttribute('width')) { - targetWidth = img.getAttribute('width'); - } else { - targetWidth = img.width; - } - if (targetWidth) imgUrl += `?width=${targetWidth}`; + const targetWidth = img.getAttribute('width') || img.width; + imgUrl += `?width=${targetWidth}`; } img.setAttribute('src', imgUrl); img.removeAttribute('data-src'); |