Detailed explanation of implementing a picture placeholder module component in react

This article mainly introduces you to relevant information on how to implement a fairly elegant placeholder module picture component in React. The article introduces it in detail through sample code, which has certain reference value for everyone's study or work. Hope it helps everyone.

Preface

I found that the picture placeholder module in the project was not elegantly written. After searching around, I found that I could not find the picture component I wanted. So I wrote one myself, and I wrote a fairly elegant picture component: mult-transition-image-view

Screenshot:

Function Introduction

First of all, it is a relatively elegant component: it is not a headache to use.

The second one can realize the following scenarios:

• When there is no picture, a placeholder image is displayed (you can directly use css to write the background, which is convenient Customized)

• I hope that when loading a large image, a small image can be occupied first, and then transition to a large image. Similar to the screenshot above.

Usage method

Install npm package

npm install react-mult-transition-image-view

Code part

 import ImageBoxView from 'react-mult-transition-image-view'

 <ImageBoxView img="#你的图片#"/>

Of course you can set other properties

 <ImageBoxView
 width="320" // 
 height="200" // 宽高，会转化成 style 属性
 mode="style" // 使用 style 去显示图片（默认:img）
 img="#你要的图片#"/> // 图片路径

The effect of transitioning from small pictures to large pictures

 <ImageBoxView
 animate="fade" // 会触发动画样式(见下方样式部分 )
 mode="style" // 使用 style 去显示图片（默认:img）
 img={[&#39;#小图地址#&#39;, &#39;#大图地址#&#39;]}/> // img 传入数组形式。

Realizing random display of pictures

When there are many pictures, the pictures can be displayed at random times to increase the experience of displaying pictures.
(It’s really a bit ugly when they come out together)

 <ImageBoxView
 delay="100" // 延迟加载（默认：0），可以传入一个随机数
 img="#你要的图片#"/> // 图片路径

Slideshow effect

Because the img attribute can be passed into the array, in theory, many pictures can be loaded to achieve the slideshow effect.
Use the wait attribute to set the waiting time after each image is loaded

 <ImageBoxView
 animate="fade" // 会触发动画样式(见下方样式部分 )
 wait="100" // 每张图片加载完后，继续加载下一张的时间（默认：0）
 mode="style" // 使用 style 去显示图片（默认:img）
 img={[&#39;#图片1#&#39;, &#39;#图片2#&#39;, &#39;#图片3#&#39;]}/> // img 传入数组形式。

Style part

Don’t forget the style part

.c-img-box{
 display:inline-block;
 width: 320px;
 height: 200px;
 background: #f7f6f5;
 position: relative;
 .img-hold{
 overflow: hidden;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 img{
  width:100%;
  height:100%;
 }
 &.img-animate{
  transition: opacity 0.5s;
 }
 }
 
 .img-cover{
 background: url('https://d.2dfire.com/om/images/menulist/7deb58da.default.png') no-repeat center/300px;
 background-color:#f0f0f0;
 }
 
 .img-cover,
 .img-hold,
 .img-hide{
 position: absolute;
 width: 100%;
 height: 100%;
 top:0;
 left:0;
 }
 
 .img-hide{
 opacity: 0;
 }
 
}

Related recommendations:

Detailed explanation of building a development environment in React Native

React encapsulates the example code of a Portal reusable component

A brief discussion on the isomorphic style of react

The above is the detailed content of Detailed explanation of implementing a picture placeholder module component in react. For more information, please follow other related articles on the PHP Chinese website!