4

後世のためのオリジナルの問題(更新を参照)

レスポンシブになるように構築しているAngular.js Webサイトがあります。ブラウザーの幅ごとに別の解像度の画像も使用したかったのです。それで、私はつまずいたPicturefill.js、それは完全に機能するようです。

唯一の問題はpicturefill.js、DOM が読み込まれると機能することです。これが表示されている特定のページに Angular テンプレートと部分的な HTML ページを使用しているため、ブラウザー ウィンドウのサイズを変更しない限り、画像は読み込まれません。

これは、picturefill の github ページで指摘された問題 (No. 35) ですが、大したことではないと考えたようで、クローズされました。画像の塗りつぶしの遅延ロードを機能させる方法についての提案がありますが、それは私の頭の中にあるのではないかと心配しています。

のソース コードpicturefill.jsへのリンクは次のとおりです。必要に応じてコードを含めることができますが、それはライブラリの問題であり、それがどのように使用されることを意図していたのかという問題のようです。

更新:これを理解しようとしている他の人のために、レスポンシブ画像を組み込むために書かれたAngularJS ディレクティブを見つけました。それは非常に新しく、私はそれを機能させることができませんでしたが、それは約束を保持しているようです.

2 回目の更新:このディレクティブにはバグがありましたが、修正されました。AngularJS Web サイトで正しく動作するようになりました。ただし、プロジェクトで動的ルートを使用している場合、このディレクティブはうまく機能しません。したがって、私の場合、app/:objectIDページごとに 1 つの JSON オブジェクトを取得する動的ルートがありました (各ページには、オブジェクト 1 とオブジェクト 2 の app/1、app/2 のような URL がありました)。そのルートが実際に変更されることはなかったので、ディレクティブは再起動に失敗したと思います。

私が理解していない私のハック?97 行目に変更waiting = truewaiting = falseます。これに対するマイナス面や副作用は見当たりませんでした。これにより、私のユース ケースでディレクティブが機能するようになりました。

4

2 に答える 2

4

Angular Pictureを見てください。@Tina自身のものに触発され、 Polyfill 2.0構文、つまり新しい HTML5picture要素を使用します。

于 2014-11-02T04:36:59.753 に答える