javascript - 更改 background-image 属性会导致 Firefox 闪烁

Question

我正在开发一个组件，它可以在我的页面上的横幅中旋转一系列背景图像。我遇到的问题是，当通过状态更改 background-image 属性 url 时，它似乎会导致白色闪光。这种闪烁似乎并不总是在 Chrome 中发生，但在 Firefox 和有时是 Safari 中确实会持续发生。对于其他上下文，我使用的是 Mac OSX。

起初我假设这是因为浏览器在请求时检索图像，但为了避免这种情况，我通过使用资源呈现隐藏的图像标记对预取做了一些考虑。

{this.props.items.map(item => (
  <img src={item} style={{ display: "none" }} />
))}

我还尝试在 rotate 方法中创建一个新图像，该方法在过渡之前预取下一个旋转元素，但似乎都不起作用。

const img = new Image();
img.src = this.props.items[index + 1];

我哪里错了？我在下面附上了一个组件示例。任何帮助将不胜感激。

class Cats extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      background: props.items[0],
      index: 0
    };

    this.rotate = this.rotate.bind(this);
  }

  // Let's you see when the component has updated.
  componentDidMount() {
    this.interval = setInterval(() => this.rotate(), 5000);
  }

  componentDidUnmount() {
    clearInterval(this.interval);
  }

  rotate() {
    const maximum = this.props.items.length - 1;
    const index = this.state.index === maximum ? 0 : this.state.index + 1;

    this.setState({
      background: this.props.items[index],
      index
    });
  }

  render() {
    return (
      <div
        className="background"
        style={{ backgroundImage: `url(${this.state.background})` }}
      >
        {this.props.items.map(item => (
          <img src={item} style={{ display: "none" }} />
        ))}
      </div>
    );
  }
}

ReactDOM.render(
  <Cats
    items={[
      "https://preview.redd.it/8lt2w3du0zb31.jpg?width=640&crop=smart&auto=webp&s=58d0eb6771296b3016d85ee1828d1c26833fd022",
      "https://preview.redd.it/120qmpjmg1c31.jpg?width=640&crop=smart&auto=webp&s=1b01fc0c3f20098e6bb1f4126c3c2a54b7bc2b8e",
      "https://preview.redd.it/guprqpenoxb31.jpg?width=640&crop=smart&auto=webp&s=ace24e96764bb40a01e7d167a88d35298db76a1c",
      "https://preview.redd.it/mlzq0x1o0xb31.jpg?width=640&crop=smart&auto=webp&s=b3fd159069f45b6c354de975daffde21f04c3ad5"
    ]}
  />,
  document.querySelector(".wrapper")
);

html, body, .wrapper {
  width: 100%;
  height: 100%;
}

.background {
  position: static;
  background-size: cover;
  height: 100%;
  width: 100%;
  transition: background-image 1s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.1/react-dom.min.js"></script>

<div class="wrapper"></div>

Answer 1

不幸的是，这个闪烁似乎是一个 known bug in Firefox由其图像解码器引起，在图像第一次显示之前不会对其进行解码。在下面的代码片段中，我创建了重叠的 div，其中一个会稍早加载下一张图像并位于另一个的后面。这样当另一个“闪烁”时，正确的图像已经显示在后面，而不是白色背景。

理论上，您也可以非常快速地显示隐藏的 div 中的所有图像，然后将其设置回白色，因为图像只需要显示一次，解码器就可以工作。

根据这个元素的长期目标，解决这个问题的最合适的方法可能是使用 <canvas>渲染你的图像。 canvas 元素使用不同的解码器，不会导致闪烁。

class Cats extends React.Component {
  constructor(props) {
    super(props);
    
    this.props.items.forEach((item) => {
       const img = new Image(640, 640);
       img.src = item;
    });

    this.state = {
      background: props.items[0],
      preloadBackground: props.items[1],
      index: 0
    };

    this.rotate = this.rotate.bind(this);
  }

  // Let's you see when the component has updated.
  componentDidMount() {
    this.interval = setInterval(() => this.rotate(), 5000);
  }

  componentDidUnmount() {
    clearInterval(this.interval);
  }

  rotate() {
    const maximum = this.props.items.length - 1;
    const index = this.state.index === maximum ? 0 : this.state.index + 1;

    this.setState({
      preloadBackground: this.props.items[index],
      index
    });
    
    setTimeout(() => {
      this.setState({
        background: this.props.items[index],
      });
    }, 100);
  }

  render() {
    return (
      <div className="pane">
        <div
          className="preload-background"
          style={{ backgroundImage: `url(${this.state.preloadBackground})` }}
        >
        </div>
        <div
          className="background"
          style={{ backgroundImage: `url(${this.state.background})` }}
        >
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Cats
    items={[
      "https://preview.redd.it/8lt2w3du0zb31.jpg?width=640&crop=smart&auto=webp&s=58d0eb6771296b3016d85ee1828d1c26833fd022",
      "https://preview.redd.it/120qmpjmg1c31.jpg?width=640&crop=smart&auto=webp&s=1b01fc0c3f20098e6bb1f4126c3c2a54b7bc2b8e",
      "https://preview.redd.it/guprqpenoxb31.jpg?width=640&crop=smart&auto=webp&s=ace24e96764bb40a01e7d167a88d35298db76a1c",
      "https://preview.redd.it/mlzq0x1o0xb31.jpg?width=640&crop=smart&auto=webp&s=b3fd159069f45b6c354de975daffde21f04c3ad5"
    ]}
  />,
  document.querySelector(".wrapper")
);

html, body, .wrapper, .pane {
  width: 100%;
  height: 100%;
}

.background {
  position: static;
  background-size: cover;
  height: 100%;
  width: 100%;
  transition: background-image 1s ease-in-out;
}

.preload-background {
  position: absolute;
  background-size: cover;
  height: 100%;
  width: 100%;
  z-index: -1;
  transition: background-image 1s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.1/react-dom.min.js"></script>

<div class="wrapper"></div>