Loadr、HTML で大きな画像をシームレスにロードするための効率的なソリューション

それはどのように機能しますか:

最初に img src から低解像度画像をロードし、次に hr-src 属性でバックグラウンドで高解像度画像をロードします。ロードされると、低解像度 URL が高解像度 URL に置き換えられます。

スターなら素晴らしいと思われるリポジトリをチェックしてください

デモ

インストール

CDN

CDN を使用してローダーをインポートします。

index.html

<script src="https://cdn.jsdelivr.net/npm/open-loadr/loadr.min.js"></script>

?特定のバージョン

<script src="https://cdn.jsdelivr.net/npm/open-loadr@latest/loadr.min.js"></script>

使用法

hr-src を HTML に追加します 要素、これが高解像度画像になります。 src 属性には、画像の低解像度バージョンが含まれます。 Loadr はバックグラウンドで高解像度画像をロードし、その URL で src を更新し、低解像度画像を置き換えます。

index.html

<img hr-src="https://open-loadr.github.io/loadr/images/the_starry_night/high_res.jpg" src="https://open-loadr.github.io/loadr/images/the_starry_night/low_res.png">

JavaScript で Loadr を呼び出します。それだけですか?.

index.html

<script>
  new Loadr();
</script>

Codepen のデモをチェックしてください。

追加のステップ

にスタイルを追加してみましょう。要素。

スタイル.css

img {
  height: 300px;
  width: 300px;
  object-fit: cover;
  border-radius: 15px;
  overflow: hidden;
}

カスタマイズ

Loadr には、簡単にカスタマイズできる変数が付属しています。

<script>
  new Loadr({
    async: false,
    cache: true,
    delay: '750'
  });
</script>

Codepen のカスタマイズ デモをチェックしてください。

以上がLoadr、HTML で大きな画像をシームレスにロードするための効率的なソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。