Example of method of implementing lazy loading of v-lazy images using vue3 combined API

Pre-knowledge

Intersection Observer

The browser provides APIs for detecting the cross state of target elements and ancestor elements/top-level document windows (viewports).

    const observer = new IntersectionObserver(function (IntersectionObserverEntry) {},options);
    (el);

The constructor receives a callback function, a configuration object (optional), and returns an observer instance. The observe method of the instance receives a dom node as an object to observe.
When the target object appears in the viewport, the callback function will be called, and all elements will be passedIntersectionObserverEntryan array of objects.

IntersectionObserverEntryThe object has the following properties (only two used in this article are listed):

• target: The observed target element is a DOM node object
• interferenceRatio: The visible proportion of the target element, that is, the proportion of the interactionRect to boundingClientRect, which is 1 when it is fully visible, and is less than or equal to 0 when it is completely invisible.

Vue3 instruction cycle

• created: Called before the binding element's attribute or event listener is applied;
• beforeMount: When the directive is bound to an element for the first time and is called before mounting the parent component;
• mounted: Called after the parent component of the binding element is mounted;
• beforeUpdate: Called before updating the VNode containing the component;
• updated: Called after the VNode containing the component's VNode and its child components are updated;
• beforeUnmount: Called before uninstalling the parent component of the binding element;
• unmounted: When the directive is unbound from the element and the parent component is uninstalled, it is called only once;

image object

Image object represents an embedded image.

• onload The callback function called when the image is loaded.

Ideas

The desired effect When multiple images are loading, just use v-lazy once on the outermost wrapper.

The src of each image is replaced with a loaded gif, and then placed in the document fragment. Wait until the user slides to the viewport before mounting the image elements. The loaded gif has been used to occupy the placeholder and replace it when the image is loaded.

First of all, the instructions of vue3 are similar to those of components and have life cycles.createdAt the time, the dom element bound to the command does not have an attribute or a DOM structure, so it is not suitable.mountedThe entire DOM element has been mounted to the page. The image starts loading when it is mounted. It is meaningless to do lazy loading, so usebeforeMount, has a complete DOM structure, but is not mounted to the page.

Complete code

export const lazyLoad = {
  beforeMount(el: any, binding: any, vnode: any, prevVnode: any) {
    const img = (`.${} img`);
    const src = ("src");
    // Use loading gif to replace the image    ("src", "https://m./images/");
    // Create a new Image object    const tempImg = new Image();
     = function () {
      ("src", src);
    };
    const parent = ;
    const observer = new IntersectionObserver(function (changes) {
      // Visual      ((item) => {
        if ( !== 0) {
           = src;
        }
      });
    });
    (el);
  },
};

Reference link:

IntersectionObserver API usage tutorial

Summarize

This is the article about the lazy loading of v-lazy images in vue3 combined API implementation. For more related content of vue3 implementation of v-lazy images, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!