BigW Consortium Gitlab
Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
G
gitlab-ce
Project
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
Registry
Registry
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
Forest Godfrey
gitlab-ce
Commits
e457f3fb
Commit
e457f3fb
authored
Nov 01, 2017
by
Filipa Lacerda
Browse files
Options
Browse Files
Download
Plain Diff
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
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
7 additions
and
8 deletions
+7
-8
lazy_loader.js
app/assets/javascripts/lazy_loader.js
+7
-8
No files found.
app/assets/javascripts/lazy_loader.js
View file @
e457f3fb
/* 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
);
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment