どのようにスムーズに反応アプリで画像をレンダリングするには?

あなたのウェブアプリUXを改善してくださいonLoad イベントと簡単なアンナSCSS.

This article is cross-posted on Codebrahma and Medium

追跡に切りましょう.下のGIFは、このポストの終わりまでに何を達成するかを示しています.

デフォルト画像のレンダリング対滑らかな画像のレンダリングを使用してrender-smooth-image-react
完成コンポーネントはこちら -  RenderSmoothImage .
< div >
<高橋潤子> <井上>
私はこれを公開しましたnpm パッケージrender-smooth-image-react . ソースコードはGitHub .

< hr/>
< H >

リトルバックストーリー
<高橋潤子>
私は最近、メディアヘビーアプリに取り組んだ.私がイメージの束が不十分になるのに気が付くまで、すべては涼しかったです.それはこんな感じだった.p >
<数字> < p >

<フィグキャプション> :貧弱な画像のレンダリング< file >
しばらくの間私は考えた🖨 <プリンタシミュレータアプリ< em/em >p >
全体的な顧客満足は、そのような貧しいローディングUX(たとえアプリの残りが素晴らしいとしても)にヒットします.これは特にメディアヘビーアプリにとって真実ですp >
おお、これを修正するために何ができるか見ましょう.p >
< hr/>
< H >

ロードアンドファイア🔫
<高橋潤子>

Let the browser download the image and render it.

画像をレンダリングするのに最適な瞬間は完全にダウンロードした後です.そのときまでローダ/プレースホルダを表示し、イメージを隠します.p >
私たちは、この反応をonLoad 画像タグのイベント.あなたはもっと読むことができますReact.js イベントhere .

<> P >
クラスをハイライト表示する

  <img onLoad={'callbackAfterImageIsDownloaded'} />

< div >
< H >

コードイット
<高橋潤子>
我々は機能的なコンポーネントを作成し、カップルの状態を維持するフックを使用します.あなたがフックを反応させるために新しいならば、あなたはより多くを学ぶことができますhere .

<> P >
クラスをハイライト表示する

  // RenderSmoothImage.jsx

  function RenderSmoothImage({src, alt}) {
    const [imageLoaded, setImageLoaded]=React.useState(false);

    return (
      <div className="smooth-image-wrapper">
        <img
          src={src}
          alt={alt}
          className={`smooth-image image-${
            imageLoaded ? 'visible' :  'hidden'
          }`}
          onLoad={()=> setImageLoaded(true)}}
        />
        {!imageLoaded && (
          <div className="smooth-preloader">
            <span className="loader" />
          </div>
        )}
      </div>
    )
  }

< div >
クラスをハイライト表示する

/** styles.css */

  .smooth-image {
    transition: opacity 1s; 
  }
  .image-visible {opacity: 1}
  .image-hidden {opacity: 0}

< div >
ここで我々は国家を維持するimageLoaded デフォルトはfalse . 次に、true , 一度画像がダウンロードされます.我々はonLoad イベントをトリガするイベントp >
それから我々は使うimageLoaded 状態を条件付きでクラスに追加するimg タグimage-visible 対image-hidden . 我々は、スムーズにするために遷移/アニメーションを追加することができます.完全なスタイルのトップでリンクされたGISTを参照してください.p >
< p >ページのプリンタシミュレータはもうないp >
< hr/>
< H >

イメージのダウンロードが失敗した場合/無効なsrc ?
<高橋潤子>
<数字> < p >

< tag >イメージタグを用いた代替テキストのイメージ
を使ってalt 属性は画像の代替テキストを表示できます.しかし、デフォルトのアイコンとスタイリングはあまりにも偉大ではありません.これを修正するには、カスタムを表示できますalt テキストbr/>
<> P >
クラスをハイライト表示する

  // RenderSmoothImage.jsx

  function RenderSmoothImage({src, alt}) {
    .....
    const [isValidSrc, setIsValidSrc] = React.useState(!!src);

    return (
      <div className="smooth-image-wrapper">
        {isValidSrc ? (
          <img
            ....
            onError={() => setIsValidSrc(false)}
          />
        ) : (
          <div className="smooth-no-image">{alt}</div>
        )}
        {isValidSrc && !imageLoaded && (
          <div className="smooth-preloader">
            <span className="loader" />
          </div>
        )}
      </div>
    )
  }

< div >
クラスをハイライト表示する

    /** styles.css */
    ......
    .smooth-no-image {
      background-image: linear-gradient(90deg,#ccc,#999,#ccc);
      color: #fff;
    }

< div >
あなたは行きます、
<数字> < p >

< file caption >画像のカスタマイズ可能な代替テキスト
あなたが望む任意の方法でスタイルを代替することができます.p >
私はあなたのためにものを容易にして、軽量のNPMパッケージを発表しましたrender-smooth-image-react .

このポストを読んでくれてありがとう、これは独学で情熱的なウェブ開発者です.サインバイオフ.次の時間までp >