Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitignore
README.md
package-lock.json
package.json
tsconfig.json

README.md

React で loading="lazy"<img> のロードに時間がかかる場合だけアニメーション効果をつける

やりたいこと

loading="lazy"<img> でロードに時間がかかるときだけアニメーション効果をつける。

(戻るボタンで戻ったときなどでキャッシュがある場合はアニメーション効果をつけない)

従来の方法

こういう関数でキャッシュの有無を判定していました。でもこれはロードするので loading="lazy" の効果がなくなってしまいます。

export const isCached = (url: string): boolean => {
  const img = new Image();
  img.src = url;
  return img.complete;
};

検討した手法

初回 render 時にタイムスタンプを保存しておいて img.onLoad 時に時間がかかっているならアニメーションを実行するようにしました。

実行方法

npm run start

Chrome の開発者ツールでキャッシュを有効/無効にして試すとアニメーションがついたりつかなかったりするのが確認できます。ロードに 20 ミリ秒以上かかった場合にアニメーションを有効化しています。

You can’t perform that action at this time.