Skip to content

Improve Lazy Image Loading by using IntersectionObserver

Lukas 'ai-pi' Eipert requested to merge 35476-lazy-image-intersectionobserver into master

What does this MR do?

  1. 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.

  2. 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?

Does this MR meet the acceptance criteria?

Edited by Lukas 'ai-pi' Eipert

Merge request reports