Improve Lazy Image Loading by using IntersectionObserver
What does this MR do?
-
If the Browser supports
IntersectionObserver
, that will be used instead of the custom scroll event watcher to lazy load images that are next to the view port. -
Add the possibility to stop the
MutationObserver
, so that lazy loading of images can be controlled more granular. A use case would be content heavy Vue Apps like MR/issue views:export default { beforeMount(){ window.gl.lazyLoader.stopContentObserver(); }, updated(){ window.gl.lazyLoader.searchLazyImages(); }, destroyed(){ window.gl.lazyLoader.startContentObserver(); } }
What are the relevant issue numbers?
- Closes #35476 (closed)
- Closes #49511 (closed)
Does this MR meet the acceptance criteria?
-
Changelog entry added, if necessary -
Documentation created/updated -
Tests added for this feature/bug -
Conforms to the code review guidelines -
Conforms to the merge request performance guidelines -
Conforms to the style guides -
Conforms to the database guides
Edited by Lukas Eipert