私は、背景画像は、それが「ロード」を表示する必要があり、それがロードされたら、それは</p> <p>「をロードされた」表示されるはずのロードされたとき、私は、コンポーネントを反応させるローダーを実装しようとしているコンポーネント

Question

を反応させるローダーを追加します私は予想通り、それは私がイメージがロードされたとき、それは知っている方法を理解すると、負荷状態に

を変更するために苦労してい

をしたローダ機能することをテストするために私のcomponentwillMount()にsetTimeout()を持っていることはそれが最善のことですこんにちはの共同でそれを持っているよりローダーで別のコンポーネントにイメージを置くmponent？

https://www.webpackbin.com/bins/-KsOEkf9ubvR6iz4bMxG

アップデートは

私は、画像に添付onload()方法使用して作業し、簡単な画像ローダを取得するために管理している - https://www.webpackbin.com/bins/-KsNpZPzveUoby1yriFo

Hello.js

を

import React from 'react' 
import Loader from './Loader' 
import styled from 'styled-components' 

const Card = styled.div` 
    height: 400px; 
    width:20%; 
    background: url('https://www.planwallpaper.com/static/images/Light-Wood-Background-Wallpaper.jpg'); 
` 
export default class Test extends React.Component { 
    constructor() { 
    super() 
    this.state = { loading:true} 
    } 

    componentWillMount() 
    { 
    setTimeout(() => this.setState({loading: false}), 3000) 
     console.log("componentDidMount"); 
    } 

    render() { 
    return (
     <div> 
     <Card> 
     <Loader loading={this.state.loading} /> 
     </Card> 
     </div> 
    ) 
    } 
} 

Loader.js

import React, { Component } from 'react' 
import styled, { keyframes } from 'styled-components' 
import { string } from 'prop-types' 

const transition1 = keyframes` 
    0%  { background: #F19939; } 
    33.33% { background: #F8CA8F; } 
    66.66% { background: #FBD8AE; } 
    100% { background: #F19939; } 
` 

const transition2 = keyframes` 
    0%  { background: #FBD8AE; } 
    33.33% { background: #F19939; } 
    66.66% { background: #F8CA8F; } 
    100% { background: #FBD8AE; } 
` 

const transition3 = keyframes` 
    0%  { background: #F8CA8F; } 
    33.33% { background: #FBD8AE; } 
    66.66% { background: #F19939; } 
    100% { background: #F8CA8F; } 
` 

const Box = styled.span` 
    height: 12px; 
    width: 12px; 
    margin: 0 3px 0 3px; 
    border-radius: 4px; 
    animation: 0.4s ${transition1 } infinite; 
` 

const Box2 = styled(Box)` 
    animation: 0.4s ${transition2 } infinite; 
` 

const Box3 = styled(Box)` 
    animation: 0.4s ${transition3 } infinite; 
` 

const TextWrap = styled.div` 
    display: flex; 
    flex: 0 0 100%; 
    justify-content: center; 
    color: #fff; 
` 

const Para = styled.p` 
    color: #fff 
    padding: 19px 0 0 0; 
` 

const ParaLoaded = styled(Para)` 
    color: #fff; 
    padding: 22px 0 0 0; 
` 

export default class Loader extends Component { 

    render() { 
    return (
     <div > 
     <div > 

      <TextWrap> 
      { 
       this.props.loading 
       ? 
        <Para>Loading...</Para> 
       : 
        <ParaLoaded>Loaded</ParaLoaded> 
      } 
      </TextWrap> 

     </div> 
     </div> 
    ) 
    } 
} 

Answer 1

あなたはこのようにそれを行うことができます。https://www.webpackbin.com/bins/-KsOJpBVfpazfXghJAaF

LoadBackgroundImage.js

const LoadBackgroundImage = (component, imageUrl, seconds, success, failure) => { 
    let timeoutOccured = false; 
    const image = new Image(); 
    const timeout = setTimeout(() => { 
    timeoutOccured = true; 
    failure(); 
    }, seconds * 1000); 

    image.onload =() => { 
    clearTimeout(timeout); 
    component.style.backgroundImage = `url('${imageUrl}')`; 
    if (!timeoutOccured) success(); 
    }; 
    image.src = imageUrl; 
}; 

export default LoadBackgroundImage; 

Hello.js

import React from 'react' 
import Loader from './Loader' 
import styled from 'styled-components' 
import LoadBackgroundImage from './LoadBackgroundImage' 

const Card = styled.div` 
    height: 400px; 
    width:20%; 
` 
export default class Hello extends React.Component { 
    constructor() { 
    super() 
    this.state = { loading:true} 
    } 

    componentDidMount() { 
    LoadBackgroundImage(
     this.card, 
     'https://www.planwallpaper.com/static/images/Light-Wood-Background-Wallpaper.jpg', 
     5, 
    () => this.setState({ loading: false }), 
    () => console.log('The image did not load in 5 seconds') 
    ); 
    } 

    render() { 
    return (
     <div> 
     <Card innerRef={card => this.card = card}> 
      <Loader loading={this.state.loading} /> 
     </Card> 
     </div> 
    ) 
    } 
} 

render（）では、innerRefを使用してカードコンポーネントへの参照を取得し、this.cardに保存しています。次に、componentDidMountでは、この参照とLoadBackgroundImage関数を使用してイメージをロードし、ロードされたときに監視します。指定された秒数でイメージがロードされた場合、成功したコールバックが呼び出されます。そうでない場合は、失敗したコールバックが呼び出されます。イメージは5秒後でもロードされますが、成功コールバックは呼び出されません。とにかく呼びたい場合は、LoadBackgroundImage関数でこのckeck：if (!timeoutOccured)をスキップすることができます。