diff options
author | Tim Zallmann <tzallmann@gitlab.com> | 2017-07-24 20:36:52 +0300 |
---|---|---|
committer | Jacob Schatz <jschatz@gitlab.com> | 2017-07-24 20:36:52 +0300 |
commit | 52b8a0db689c2df968776a1f369ea6a6db245d39 (patch) | |
tree | 4955f45d5d19c1d32aee8bc496041acdd74763cb /doc | |
parent | 3a26bce80eb739ca3f552dfe71e39b9a177eb36e (diff) |
Resolve "Lazy load images on the Frontend"
Diffstat (limited to 'doc')
-rw-r--r-- | doc/development/fe_guide/performance.md | 12 |
1 files changed, 12 insertions, 0 deletions
diff --git a/doc/development/fe_guide/performance.md b/doc/development/fe_guide/performance.md index 2ddcbe13afa..f25313d6cff 100644 --- a/doc/development/fe_guide/performance.md +++ b/doc/development/fe_guide/performance.md @@ -23,6 +23,18 @@ controlled by the server. 1. The backend code will most likely be using etags. You do not and should not check for status `304 Not Modified`. The browser will transform it for you. +### Lazy Loading + +To improve the time to first render we are using lazy loading for images. This works by setting +the actual image source on the `data-src` attribute. After the HTML is rendered and JavaScript is loaded, +the value of `data-src` will be moved to `src` automatically if the image is in the current viewport. + +* Prepare images in HTML for lazy loading by renaming the `src` attribute to `data-src` +* If you are using the Rails `image_tag` helper, all images will be lazy-loaded by default unless `lazy: false` is provided. + +If you are asynchronously adding content which contains lazy images then you need to call the function +`gl.lazyLoader.searchLazyImages()` which will search for lazy images and load them if needed. + ## Reducing Asset Footprint ### Page-specific JavaScript |