Question

我有一个项目，我在模态中使用Bootstrap轮播。问题在于初始化轮播会花费一些时间，然后需要一些时间来加载图像。结果是，当打开模态时，首先根本看不到圆盘传送带，然后在1秒钟后它变得可见，并且图像被加载到其中。有没有一种方法可以使旋转木马在加载图像时可见（内容空白）？

我的主要JSX包含一个包含轮播的模式：

<Modal show={this.state.modal} 
        modalClosed={() => this.setState({modal: false})}>

        {this.state.modal && <Carousel name={this.state.projectSelectedName}/>}

        <div className="carousel-content">
            <h3 className="page-title-fast" style={{marginBottom: '1rem', color: '#414040'}}>{this.state.projectSelectedName}</h3>
            <p className="carousel-p" style={{textAlign: 'left', fontSize: this.checkApp()}}>
                <div dangerouslySetInnerHTML={{__html: this.state.projectSelectedDescription}}/>
            </p>
            <div>
                <a target="_blank" rel="noopener noreferrer" href={this.state.projectSelectedUrl} className="btn btn--blue btn--animation mr-4 mb-2"><FontAwesomeIcon icon="plane-departure" />&nbsp;&nbsp;{this.getButtonText()}</a>
                <a target="_blank" style={{display: this.state.projectSelectedName === 'Bro2Bro' ? 'inline-block' : 'none', backgroundColor:'rgb(62, 62, 39)'}} rel="noopener noreferrer" href="https://github.com/omerfaran/Bro2Bro" className="btn btn--blue btn--animation mb-2"><i className="fab fa-github"></i>&nbsp;&nbsp;VIEW ON GITHUB</a>
            </div>

        </div>
</Modal>

轮播会动态打开图像：

import React from 'react';

let carousel

  carousel = (props) => (
        <div id="slider2" className="carousel slide mb-3" style={{borderBottom: '1px solid #ccc'}} data-ride="carousel">
        <div className="carousel-inner">
          <div className="carousel-item active">
            <img className="d-block img-fludid" src={require("../../../../assets/" + props.name.toLowerCase() + '/screen1.jpg')} alt="First Slide"/>
          </div>
          <div className="carousel-item">
            <img className="d-block img-fluid" src={require("../../../../assets/" + props.name.toLowerCase() + '/screen2.jpg')} alt="Second Slide"/>
          </div>
          <div className="carousel-item">
            <img className="d-block img-fluid" src={require("../../../../assets/" + props.name.toLowerCase() + '/screen3.jpg')} alt="Third Slide"/>
          </div>
          <div className="carousel-item">
            <img className="d-block img-fluid" src={require("../../../../assets/" + props.name.toLowerCase() + '/screen4.jpg')} alt="Third Slide"/>
          </div>
        </div>

        <a href="#slider2" className="carousel-control-prev" data-slide="prev">
          <span className="carousel-control-prev-icon"></span>
        </a>

        <a href="#slider2" className="carousel-control-next" data-slide="next">
          <span className="carousel-control-next-icon"></span>
        </a>
      </div>
      )



export default carousel;

用户可以通过单击不同的按钮来打开模态，然后模态将打开并加载不同的图像：

showCardModal = (project) => {
    this.setState({
        modal: true,
        projectSelectedName: project.name,
        projectSelectedDescription: project.description,
        projectSelectedUrl: project.url,
    })
}

我所需要的只是轮播在加载图像之前获取宽度和高度的一种方法。引导程序可能吗？

在加载图像时，引导轮播不可见

0 个答案: