You might want to write your own React plugin

Subtitle: Why am I writing this React plugin

React lazy loading is a common feature in projects. However, the existing React lazy loading component library is not very cool to use 😝. To summarize, there are the following points:

No lazy loading component for image only. Most component libraries have built-in lazy loading functions of modules, components, scripts and iframe, while image lazy loading functions are weakened.
Animation effects are not supported.
Not flexible and configurable.
Placeholder can’t be componentized.
Picture/SRcSet is not supported.

react-lazyimg-component

Know what kind of components you want, just do it 😎. As a result, the react-lazyimg-component was born 😆. Let’s see how it works first:

Singsong: If you have the time, we encourage you to implement some widgets yourself.

PC preview:

Hit it hard here

Mobile preview (Scan) :

When does it need to be used

1. Small and light, easy to use, basically no learning cost

Back in the days when jQuery ruled the world, the code was just a jQuery shuttle. JQuery. Lazyload is a popular lazy image loading plugin. Lazyload = jquery.lazyLoad = jquery.lazyLoad = jquery.lazyLoad = jquery.lazyLoad I wondered if I could inherit the jQuery. Lazyload method while keeping the react component features. This can be used quickly ~~~~~😝

Singsong: This is just an inheritance of jquery.lazyLoad configuration features, not a full inheritance. After all, jQuery is very different from the prevailing MVVM framework ideas.

Lazyload ($act-lazyimg-component) : $act-lazyimg-component ($act-lazyimg-component) Talking instead of writing, however, is of no use. Let’s see if it works:

The installation

// npm
$> npm install react-lazyimg-component
// yarn
$> yarn add react-lazyimg-component
Copy the code

use

/ / introduction
import Lazyimg, { withLazyimg } from 'react-lazyimg-component';

/ / call
<Lazyimg
  className="lazy"
  src={'http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg'} / >;Copy the code

Is it very simple, there is 😝. This is just the default configuration using react-lazyimg-component. Here we can customize lazy loading behavior with configuration items:

/ / introduce lazyimg
import Lazyimg, { withLazyimg } from 'react-lazyimg-component';
/ / introduce volecity. Js
import 'velocity-animate';
import 'velocity-animate/velocity.ui';

/ / configuration
const config = {
  threshold: 100.// Specify the trigger threshold
  js_effect: 'transition.fadeIn'.// Support velocity.js animation effects
};
// Generate the corresponding Lazy component based on the configuration item
const Lazy = withLazyimg(config);

/ / call
<Lazy
  className="lazy"
  src={'http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg'} / >;Copy the code

Let’s look at the react-lazyimg-component configuration items:

threshold: 0.// Trigger loading when you specify how far away from the bottom
event: 'scroll'.// Specify the trigger event, default is 'scroll'
js_effect: undefined.// Display the js animation effect of the image
css_effect: undefined.// Display the CSS animation effect of the image
container: window.// Specify the container, default is window
parent: undefined.// You can specify which parent element of the element the animation effect is applied to
appear: null.// Trigger the appear hook function when an element appears in a visual window
load: null.// Trigger the load hook function after the element picture is loaded
error: null.// Raise the error hook function when the image is loaded incorrectly
node_type: 'img'.// Specify the type of node to generate. Default is 'img'.
placeholder: // The react component supports placeholder elements in addition to normal images.
  'data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAA AANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC'.Copy the code

😄 if you are familiar with jquery. Lazyload, then you need to know the following configuration items:

Js_effect: Specifies the animation effect for the element to display, based on velocity.js animation. You need to load velocity.js before using it.
Css_effect: Specifies the animation effect for the element to display, based on animation.css animation implementation. You need to install animate. CSS before using it.
Parent: Used to specify which parent element of the element the animation effect is applied to. Value:
- Parent element’s Selector selector (string)
- Parent level level (integer)
Node_type: Specifies the type of element generated by React. The default is ‘img’.
Placeholder: placeholder elements that support react components in addition to normal images.

2. Supportvelocity.js,animate.cssAnimation effect library, and custom animation effects. It also supports animation effects on parent elements.

Specify the js-effect configuration item to configure the veloce.js animation effect

Note: js-effect depends on velocity.js. You need to make sure velocity.js is loaded.

/ / introduce lazyimg
import Lazyimg, { withLazyimg } from 'react-lazyimg-component';
/ / introduce volecity. Js
import 'velocity-animate';
import 'velocity-animate/velocity.ui';
/ / configuration
const config = {
  placeholder: 'loading.svg'.js_effect: 'transition.fadeIn'.// Support velocity.js animation effects
};
const Lazy = withLazyimg(config);
/ / call
<Lazy
  className="lazy"
  src={'http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg'} / >;Copy the code

Directly on the effect 😝

Specify the CSS-effect configuration item to configure animate. CSS animation effects

Note: CSS-effect depends on animate. CSS. You need to ensure that animate. CSS is installed.

  / / configuration
  const config = {
    js_effect="transition.flipXIn" // Does not take effect
    css_effect={['animated'.'rollIn']} // Customize CSS animations
  };
  const Lazy = withLazyimg(config);
  / / call
  <Lazy
    className="lazy"
    src={'http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg'} / >;Copy the code

Directly on the effect 😝

Specify the parent configuration item to specify the animation effect of the parent element

Singsong: Why lazy loading animations only apply to target elements, in some cases parent elements applied to target elements have unexpected effects 😝

<div className="example">
  // Specify the animation effect to be applied to the parent element
  <Title title=Parent animation Effects className="sub" />
  <div className="example-img">
    <Lazyimg
      className="lazy"
      src={'http://zhansingsong.github.io/lazyimg/22.4582 fc71. JPG'}
      css_effect={['animated', 'flipInY']} / / customcssAnimation effectsparent=".example"// Specify the parent element selector. You can also specify the parent levellevel:2
    />
  </div>
</div>
Copy the code

Directly on the effect 😝

React component placeholder

Singsong: Traditional placeholder is usually replaced by images. Why not customize with components for higher scalability? Completely can cast off the manacle of stylist, zha people develop free play 😯! Think of some chicken jelly 😝~~~~~~

Define the placeholder component first

import React from 'react';
import './style.scss';
export default props => {
  let { className, text, img, children } = props;
  return (
    <div
      className={['placeholder', className]
        .filter(item= > {
          if (item) {
            return item;
          }
        })
        .join(' ')}
    >
      {img && <img src={img} className="placeholder-img" />}
      {text && <span className="placeholder-text">{children || text}</span>}
    </div>
  );
};
Copy the code

Specify placeholder configuration items as placeholder components defined above

/ / configuration
const Lazy = withLazyimg({
  js_effect: 'transition.perspectiveDownIn'.placeholder: <Placeholder img={require('./loading.svg')} />, }); / / call < Lazy className = "Lazy" SRC = "http://zhansingsong.github.io/lazyimg/22.4582fc71.jpg" / > attach;Copy the code

Directly on the effect 😝

Singsong: Is the small flame bright ~~~~~

Then we look at component placeholder application scenarios, directly on the effect 😝

The above picture is the classification page by customizing the display text placeholder component instead of the normal gray image, the effect is not looking good 😝. This is the case I used in my actual project. Here small partners can play freely ha ~~~~~. If you have a good idea, you can @ me, thank you in advance!

4. Picture/SRcset

Progressive Web App’s Progressive web applications are becoming more and more popular among developers to achieve the ultimate experience of web applications, and responsive images are one of the key technologies. In order to follow the big army, we also need to understand oh!

The SRCset feature implements responsive images

  // dpr
  <Lazyimg
    className="lazy"
    src={'http://zhansingsong.github.io/lazyimg/22.4582 fc71. JPG'}
    srcSet=PNG 1x, source_2x.png 2x, source_3x.png 3x, source_3.5x.png 3.5x"
    js_effect="transition.bounceIn"
  />
Copy the code

Directly on the effect 😝

Singsong: Here srcset works better with SIZES

The Picture element implements a responsive picture

  <picture>
      <source media="(min-width: 650px)" srcSet="https://www.w3schools.com/tags/img_pink_flowers.jpg" />
      <source media="(min-width: 465px)" srcSet="https://www.w3schools.com/tags/img_white_flower.jpg"/>
      <Lazyimg
      className="lazy"
      src={'http://zhansingsong.github.io/lazyimg/22.4582 fc71. JPG'}
      js_effect="transition.expandIn"
    />
  </picture>
Copy the code

Directly on the effect 😝

After the language

This plug-in is extracted by me from the project, personal use is quite smooth, I took out to share with you. In addition, after all, personal ability is limited, if you find the plug-in problems or have any good suggestions, please also let me know, first here thanks 😝. Finally, welcome star😝, welcome Watch 😝, welcome Fork 😝

You might want to write your own React plugin

react-lazyimg-component

When does it need to be used

1. Small and light, easy to use, basically no learning cost

The installation

use

2. Supportvelocity.js,animate.cssAnimation effect library, and custom animation effects. It also supports animation effects on parent elements.

React component placeholder

4. Picture/SRcset

After the language

Related Posts

Exploration of the optimal scheme of front-end data dictionary

Summary of Flutter components

New ES6 features