Foundation Appsインターチェンジを作成するには、必要に応じてイメージをロードしますか？

アプリケーションの基盤（およびF4Aの現在メンテナンスされている角ベースアプリケーション）のdocumentationインターチェンジは、この例を、モバイルデバイス上に小さなサイズの画像のみをロードして帯域幅を節約する方法として示しています。Foundation Appsインターチェンジを作成するには、必要に応じてイメージをロードしますか？

<ba-interchange> 
    <img media="small" src="assets/img/small.jpg"> 
    <img media="medium" src="assets/img/medium.jpg"> 
    <img media="large" src="assets/img/large.jpg"> 
</ba-interchange>

は、しかし唯一の小さな画像が表示されている間、ブラウザはまだ3個のimgのタグを見て、角度にもロードされる前に、すべての3枚の画像を要求します。これは、あなたの目的が帯域幅を節約することであれば、インターチェンジを全く使用する目的を逸らします。

Foundation Interchange for Foundation 6では、すべての画像を要素のdata-interchange属性文字列に代入することで、これを回避しています。 F4Aには似たようなものがありますか？または、上記のサンプルコードについて、私が見逃していることがありますか？

出典

2016-09-07 Chris

角度ベースアプリケーションによって提供されるba-if指示を使用することをお勧めします。このディレクティブは内部的にng-ifディレクティブを使用しており、指定されたメディアクエリが一致した場合を除いて、img要素がDOMに追加されません。

ba-ifディレクティブ使用して、次のようにあなたのコードを書き換えることができ

：

<img ba-if="small only" src="assets/img/small.jpg"> 
<img ba-if="medium only" src="assets/img/medium.jpg"> 
<img ba-if="large only" src="assets/img/large.jpg">

出典

2016-11-12 00:08:39

は、この基本的に同じことをBA-交換はしないのですが？私はそれを試しましたが、3つの画像すべてがフェッチされているのがわかります。なぜなら、ブラウザは、角度がロードされる前にimgタグを見るからです。 – Chris

ba-ifはフードの下で[ng-if]（https://docs.angularjs.org/api/ng/directive/ngIf）を使用しますが、式が偽の場合はDOMをレンダリングしません。 –

右Angularがテンプレートをロードしている場合にのみ機能します。私の場合、テンプレートは最初のリクエストの一部です。ブラウザはAngularがロードされる前にimgタグをレンダリングしています。しかし、srcの代わりにng-srcを使用すると、imgの読み込みをAngularに制御できます。 – Chris

Foundation Appsインターチェンジを作成するには、必要に応じてイメージをロードしますか？

答えて

関連する問題