我正在尝试实现某种延迟的背景图像加载。我希望图像在加载后立即淡入。因此，我在加载时更改了holding div的不透明度。**它适用于Chrome或Firefox，但不知何故不适用于Safari。**使用Safari时，图像只是显示，没有任何过渡。为什么呢？

import React, {Component} from 'react';

import './ImageHolder.css'

class LazyImage extends Component {

    state = {
        src: null,
    };

    componentDidUpdate(prevProps, prevState, snapshot) {

        if (prevProps.image !== this.props.image) {
            this.setState({src: null});
            this.loadImage();
        }
    }

    componentDidMount() {
        this.loadImage();
    }

    loadImage = () => {
        const src = this.props.image;

        const imageLoader = new Image();
        imageLoader.src = src;

        imageLoader.onload = () => {
            this.setState({src: src})
        };
    };

    classList = (classes) => {
        return Object
            .entries(classes)
            .filter(entry => entry[1])
            .map(entry => entry[0])
            .join(' ');
    };

    render() {
        const style = {
            backgroundImage: 'url(' + this.state.src + ')',
        };

        return(
            <div className="h-image-wrapper" style={{backgroundColor: this.props.bgColor}}>
                <div className={this.classList({
                    'h-image-holder': true,
                    'h-image-loaded': this.state.src,
                })} style={style} />
            </div>
        );
    }
}

export default LazyImage;

个字符