react-helmetで画像をpreloadする

メモ書きです。

画像を先に読み込みたい時について。

以下のようなコンポーネントを作る。

import * as React from 'react'
import { Helmet } from 'react-helmet'

interface ImagePreloaderProps {
  images: string[]
}

const ImagePreloader: React.FunctionComponent<ImagePreloaderProps> = ({ images }) => (
  <Helmet>
    {images
      .filter(item => item)
      .map((image, index) => (
        <link rel="preload" href={image} as="image"/>
      ))}
  </Helmet>
)

export default ImagePreloader

今やっているやつが、スライドを見せていくような感じのもので、そのスライド中に含まれる画像の読み込みが通信環境によって遅い時があった。

予めそのスライドのコンテナとなるコンポーネントで、このコンポーネントを呼び出すことでpreloadすることができた。

通信環境の再現はchromeのデベロッパーツール:Networkタブでできる。 Slow 3G 状態でも問題なく読み込めることを確認できた。