Lazy loading principle and handwriting implementation

All three schemes are compatible and IntersectionObserver API is used. In other words, if the browser supports IntersectionObserver, the browser API is directly used. If not, the scrolllistener listens for elements appearing or approaching the viewport area. Here’s a quick look at each implementation:

lazysizesimplementation

Lazysizes core source is lazysizes-core.js and lazysizes-intersection.js, where the implementation of lazysizes-core scroll monitor, Lazyzes-intersection is an implementation of IntersectionObserver. First we define the self-executing function (code), define the default parameter variable, and merge it if the user has a custom parameter lazySizesConfig.

(function(){
    var prop;
    var lazySizesDefaults = {
            lazyClass: 'lazyload'.loadedClass: 'lazyloaded'.loadingClass: 'lazyloading'./ /... omit
    };
    lazySizesCfg = window.lazySizesConfig || window.lazysizesConfig || {};
    // Merge the default configuration
    for(prop in lazySizesDefaults){
            if(! (propinlazySizesCfg)){ lazySizesCfg[prop] = lazySizesDefaults[prop]; }}}) ();Copy the code

Loader._ () ¶ Loader._ () ¶ Loader._ () ¶ loader._() ¶

_ :function(){
    // Get the DOM element that needs lazyLoad
    // The lazySizescfg. lazyClass configuration item can be customized
    lazysizes.elements = document.getElementsByClassName(lazySizesCfg.lazyClass);
    // Listen for scroll
    addEventListener('scroll', throttledCheckElements, true);
}
Copy the code

The main implementation of the listener is throttledCheckElements, but it is actually called checkElements. Throttling is performed for performance reasons. It is interesting to see its throttling implementation (code), as well as the implementation of requestIdleCallback. Take a look at how checkElements checks if an element is in the viewable area and how it replaces the real resource in the attribute.

// Trigger distance
if(! defaultExpand) { defaultExpand = (! lazySizesCfg.expand || lazySizesCfg.expand <1)? docElem.clientHeight >500 && docElem.clientWidth > 500 ? 500 : 370 :
  lazySizesCfg.expand;
}
/ /... omit
// If the trigger condition is met when traversing the current element
rect = lazyloadElems[i].getBoundingClientRect();
if ((eLbottom = rect.bottom) >= elemNegativeExpand &&
    (eLtop = rect.top) <= elvH &&
    (eLright = rect.right) >= elemNegativeExpand * hFac &&
    (eLleft = rect.left) <= eLvW &&
    (eLbottom || eLright || eLleft || eLtop) &&
    (lazySizesCfg.loadHidden || isVisible(lazyloadElems[i])) &&
    ((isCompleted && isLoading < 3 && !elemExpandVal && (loadMode < 3 || lowRuns < 4)) || isNestedVisible(lazyloadElems[i], elemExpand))){
  unveilElement(lazyloadElems[i]);
  loadedSomething = true;
  if(isLoading > 9) {break;}
}
Copy the code

When iterating through the current element, judge that the trigger condition is met and lazyUnveil (code) in unveilElement is called to complete the attribute replacement. Moreover, IntersectionObserver can be implemented in the same way, but IntersectionObserver and Scroll can judge in a different way.

Loza.jsimplementation

The implementation uses the Intersection Observer API and MutationObserver directly for better performance. The code is only ~ 1K, which is very lightweight. Add a comment to the code:

export default function (selector = '.lozad', options = {}) {
  // Merge custom configuration with default configuration
  const {root, rootMargin, threshold, enableAutoReload, load, loaded} = Object.assign({}, defaultConfig, options)
	// Initializes the observer, mutationObserver does the element listener and passes the listener callback
  let observer
  let mutationObserver
  // Determine whether IntersectionObserver is supported
  if (support('IntersectionObserver')) {
    observer = new IntersectionObserver(onIntersection(load, loaded), {
      root,
      rootMargin,
      threshold
    })
  }
	// Check whether MutationObserver is supported, enableAutoReload is automatically reloaded when the property changes
  if (support('MutationObserver') && enableAutoReload) {
    mutationObserver = new MutationObserver(onMutation(load, loaded))
  }
	// According to the selector selector, get all the DOM nodes and iterate over them
  const elements = getElements(selector, root)
  for (let i = 0; i < elements.length; i++) {
    // Large image optimization, preLoad method implemented, when the large image is not loaded, can be customized placeholder background
    preLoad(elements[i])
  }

  return {
    // External call: Register the observed, that is, register the DOM node that needs to be observed
    observe() {
      const elements = getElements(selector, root)
			/ / traverse
      for (let i = 0; i < elements.length; i++) {
        if (isLoaded(elements[i])) {
          continue
        }
				
        if (observer) {
          if (mutationObserver && enableAutoReload) {
            mutationObserver.observe(elements[i], {subtree: true.attributes: true.attributeFilter: validAttribute})
          }
					Observe.observe (target) is a simple way to register the observed
          observer.observe(elements[i])
          continue
        }
        load(elements[i])
        markAsLoaded(elements[i])
        loaded(elements[i])
      }
    },
    triggerLoad(element) {
      if (isLoaded(element)) {
        return
      }
      load(element)
      markAsLoaded(element)
      loaded(element)
    },
    observer,
    mutationObserver
  }
}
Copy the code

Based on the above figure, we can conclude that the conditions for determining whether an element is in a view are:top >= 0 && bottom <= viewHeight(Window height) andLeft >= 0 && right <= viewWidth

Hence the following code:

function checkElement(element) :boolean {
  const viewWidth = window.innerWidth || document.documentElement.clientWidth
  const viewHeight = window.innerHeight || document.documentElement.clientHeight
  const {
    top,
    right,
    bottom,
    left,
  } = element.getBoundingClientRect() || {}
  return (
    top >= 0 &&
    bottom <= viewHeight &&
    left >= 0 &&
    right <= viewWidth
  );
}
Copy the code

Handwriting pictures lazy loading

IntersectionObserver

<script>
    function lazyload() {
      // IntersectionObserver attributes
      const options = { threshold: 1.0 }
      const intersectionObserver = new IntersectionObserver(function (entries, observer) {
        entries.forEach(entry= > {
          console.log('entry', entry);
          const el = entry.target
          if (entry.isIntersecting) {
            !function () {
              var img = new Image()
              img.src = el.dataset.src
              img.onload = function () {
                el.src = img.src
              }
            }()
          }
        });
      }, options);
      // start observing
      var eles = document.querySelectorAll('img[data-src][lazyload]')
      Array.prototype.forEach.call(eles, function (el, index) {
        intersectionObserver.observe(el);
      })
    }
    lazyload()
  </script>
Copy the code