開発者コミュニティの多様なニーズに応えるツールを提供するために、常にユーザーからのフィードバックを求めています。ユーザーから Angular アプリケーションのサポートを求められ、私たちはその声に耳を傾けました。本日、私たちは、のローンチを発表します Angular クライアントライブラリ imgix用。この SDK スイートへの追加により、開発者は Angular アプリケーションで簡単に画像を提供できるようになります。
この投稿では、プレースホルダーや遅延読み込みなど、新しいAngularライブラリの機能について説明します。
なぜアンギュラーなのか
角張った は、2010 年に Google によって開発された最新のフロントエンドアプリケーションフレームワークで、開発者は単一ページのアプリケーションを構築できます。このフレームワークは 2016 年に大幅に改訂され、Angular ライブラリはこの新しいバージョンと統合できるように構築されています。
私たちは、React、Angular、Vue など、最も人気のあるすべてのフロントエンドフレームワークに imgix の力をもたらすことに取り組んでいます。Angular ライブラリーの追加により、これらのフレームワークを使用する開発者に全面的に対応できるようになりました。(当社の React ライブラリはこちらにあります。 ここに、そして私たちの Vue ライブラリ ここに。)
当社のAngularライブラリの紹介
imgix の Angular ライブラリは、他のフロントエンドライブラリと同様の形式を採用しています。開発者は Angular アプリケーションを当社の API と簡単に統合できるようになりました。
Angularライブラリを使用すると、開発者は当社のAngularライブラリを使用してレスポンシブ画像を簡単にレンダリングできます srcset 生成機能。これにより、デバイスや画面サイズに関係なく画像の見栄えが良くなります。また、このライブラリにより、開発者はデバイスのピクセル比に応じて画像のサイズを固定サイズに変更できます。
当社のAngularライブラリは、以下のAPIに準拠しています <img> 開発者が簡単に使えるように、できるだけ要素を追加してください。ユーザーは以下を適用することもできます <picture> アートディレクションを実装するための要素。
プレースホルダー
ライブラリには、当社で導入されたのと同じプレースホルダー動作が含まれています Vue ライブラリ。デフォルトでは、ライブラリは画像の幅と高さの属性を使用して柔軟な画像レンダリングを行います。
プレースホルダーの動作をサポートするために必要な要件は次のとおりです。
幅そして高さimg 要素に設定された属性- 一部
幅CSS 値 (例:10ピクセル、100%、計算 (100vw-10ピクセル)) 高さ:自動CSS プロパティとして
たとえば、クラスのある画像の場合 テスト-IMG、CSS は次のように定義する必要があります。
.test-img {
/* 次の 2 行は、新しいブラウザ機能にとって重要です。*/
幅:100%;
height: auto; /* 画像の高さを本来あるべき値に設定し、画像に設定されている高さ属性を無視するようにブラウザに指示します*/
}
実際について <img> タグ:幅と高さの属性は、縦横比が画像の縦横比と同じであれば、どのような値でもかまいません。例えば 幅 = 100、高さ = 50 そのままでも結構です 幅 = 2、高さ = 1。
この例では、画像の縦横比は約0. 66:1 なので、幅を 66、高さを100に設定していますが、たとえば幅と高さを 33 と 50、または 660 と 1000 に設定することもできます。
Angularテンプレートでは、これは次のように表示されます。
<img
IxiMG
パス=」examples/pione.jpg」
サイズ=「カルク (100VW-128ピクセル)」
クラス=「テスト-IMG」
幅=インチ 66インチ
高さ=「100"
/>
また、私たちの方法について詳しく読むこともできます プレースホルダー動作のサポート 働く。
レイジーローディング
レイジーローディング機能には、私たちが先駆けて開発したハイブリッドネイティブ+交差点オブザーバーアプローチが含まれています Vue ライブラリ。ブラウザがサポートしている場合はネイティブの遅延読み込みを使用し、遅延読み込みがサポートされていない場合はライブラリにフォールバックします。
新しい ロードします 属性は、画像 (および iframe) でのこの動作をサポートします。この属性には有効な設定がいくつかありますが、ほとんどの場合、開発者は設定したいと思うでしょう。 読み込み中=「レイジー」 画像を遅延して読み込ませたい場合。
ネイティブ遅延読み込みには、以前のバージョンの遅延読み込みに比べて多くの利点があります。主な利点の 1 つは、ページの JavaScript が読み込まれる前に機能し、JavaScript をサポートしていないブラウザーでも機能することです。ブラウザーがネイティブ遅延読み込みをサポートしていない場合、遅延のない画像の読み込みにフォールバックします。
遅延読み込みの方法について詳しく知ることができます ここに。
結論
このユーザーからリクエストされたライブラリは、更新されたプレースホルダー機能と遅延読み込み戦略を含む、Angularアプリケーションのimgix統合を提供します。ライブラリ (@imgix) の使用方法を見せて、ツイートしてください ()。また、次のこともできます。 手を差し伸べて 何か質問があれば。
