問題タブ [picturefill]

(先制攻撃: これを重複としてマークしたい場合は、他の質問が「なぜこのエラーが発生するのか?」と尋ねているように見えることに注意してください。私はこのエラーが発生する理由を知っています。 JavaScript コードのエラーを検出できます. Firebug コンソールにのみ表示され、もちろん、画像がロードされたときにユーザーには明らかです.)

レスポンシブ画像にピクチャーフィルを使用しています。画像の読み込みイベントに対して発生するコールバックがあります。したがって、コールバックは、別の画像が picturefill によって読み込まれるように、誰かがブラウザ ウィンドウのサイズを変更するたびに実行されます。

コールバック内で、canvas を介して画像データを dataURL に変換し、画像データを localStorage にキャッシュして、ユーザーがオフラインの場合でも使用できるようにします。

「オフライン」に関する部分に注意してください。そのため、ブラウザのキャッシュに頼ることはできません。また、画像がレスポンシブであるため、HTML5 オフライン アプリケーション キャッシュは私のニーズを満たしていません。(レスポンシブ画像と HTML オフライン アプリケーション キャッシュとの非互換性については、「アプリケーション キャッシュはおせっかい」を参照してください。)

Mac 上の Firefox 14.0.1 では、大きな画像が完全に読み込まれる前に、ブラウザーを非常に大きなサイズに変更し、再度小さなサイズに戻すと、読み込み画像が起動します。最終的に、Firebug コンソールで「画像が破損しているか切り捨てられています」と報告されますが、例外はスローされず、エラー イベントもトリガーされません。コードに何か問題があることを示すものはありません。ちょうど Firebug コンソールで。その間、切り捨てられたイメージを localStorage に格納します。

その画像をキャッシュしないように、JavaScript 内でこの問題を確実かつ効率的に検出するにはどうすればよいですか?

これは、picturefill div をループして、picturefill によって挿入された img タグを見つける方法です。

コールバックは次のようになりcacheImage()ます。

最後に、有罪を保護するために URL が変更された、Firebug で表示されているものの全文を次に示します。

画像の破損または切り捨て: http://www.example.com/pf/external/imgs/extralarge.png

私は、picturefill.js プロジェクトがこれらのデバイスで正しく動作しないため、Android 2.3 携帯電話と IE8/9 でのみ読み込む必要がある複数の画像を含む 1 ページのドキュメントを持っています。

ピクチャフィル コードのインスタンスの 1 つで、このスクリプトを 1 回使用することに成功しています。

ページでさらに数回使用する必要がありますが、上記の正確なコードを複数回貼り付けると問題が発生します。

上記を、一意の画像のインスタンスごとに異なる画像を呼び出すために呼び出すことができる関数に変える方法はありますか? 上記のスクリプトを使用して、ページ全体で少なくとも 6 つの一意の画像を呼び出す必要があります。

サイトの次のページから必要なコンテンツを介して無限スクロールの読み込みをエミュレートする tumblr ページ用の小さなjQueryスクリプトを作成しています (これはtumblrサイトなので、ページネーションは問題ありません)。 いくつかの無限スクロールプラグインがあることは知っていますが、私が試したものはすべてうまくいきませんでした。私はそのすべての機能を必要としません。スクリプトは必要な新しい要素をロードしますが、問題は毎回 2 つのページからコンテンツをロードすることです。そして、明らかに、代わりに 1 つのページ コンテンツのみをロードする必要があります。jQuery.get()

jQueryは次 のとおりです。

読み込まれるコンテンツは次のとおりです。

レスポンシブ画像にPicturefillを使用していますが、うまく機能します。誰にもアイデアがありますか？ありがとう。

初めて Picturefull を使用していますが、正しく理解できているかどうかわかりません。私が使用する場合..

画像が表示されません。でも使ったら..

画像が表示されます。-webkit-min-device-pixel-ratio: 2.0 を使用したい。誰かがこれを適切に使用する方法を説明できますか? ありがとうございました。

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

レスポンシブになるように構築している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 = trueしwaiting = falseます。これに対するマイナス面や副作用は見当たりませんでした。これにより、私のユース ケースでディレクティブが機能するようになりました。

Royal Slider HTML バージョンの Web サイトを作成しています。現在表示されている解像度に合わせて最適化された画像を読み込むために、picturefillを使用したいと考えています。しかし、私はそれを機能させるのに問題があります。通常の WP_Query を介して画像を提供している間は機能します。

私はこのスレッドを読みましたが、それは私を助けませんでした。

ありがとう、/ポール

編集: 28-06 09:40

開発者と連絡を取りました...それで彼はいくつかのヒントをくれました。それらの 1 つは、スライダーの前に、picturefill が確実に初期化されるようにすることでした。つまり、少なくとも私が思うに、royalslider ファイルの前に picturefill.js をロードする必要があるということです。

それでも運はありません。Oh en により、コードが少し変更されました。

スライダーの構文に従いません。

私はpicturefill.js（Scott Jehl）を使用しています：https://github.com/scottjehl/picturefill/blob/master/picturefill.js

彼のドキュメントのように、スパンタグとデータ属性を使用して、セットアップする方法を次に示します（一部のコードは省略されています。これは、単なるメディアクエリのものでした）：

期待どおり、正しい画像が読み込まれてページに配置されています。生成された HTML のスニペットを次に示します。

私がやりたいのは、最終的に生成される img タグにクラスを追加することです。

ただし、追加された画像を選択することさえできません! これが私が取り組んでいるものです：

画像がページ上にある場合でも、これは 0 を返します。メディア クエリに基づいてサイズ 1、b/c が返されることを期待しています。画像の 1 つは、picturefill を使用してページに追加されます。

DOM の読み込みに問題がないことを確認するために、picturefill.js をヘッダーに配置し (ほとんどの場合、JS はフッターに配置する必要があります)、さらには次のようにしました。

まだimgが見つからないようです。

lazyload の画像構文が data-original と共に img タグを必要とし、Picturefill の構文にそれらの場所がない場合、lazyload.js を Picturefill に組み込む方法を考えています。

たとえば、これは Picturefill を使用した画像のマークアップです。

lazyload.js が必要とする class 属性を image タグまたは data-original 属性のどこに配置するかわかりません。lazyload.js を Picturefill と一緒に実装する方法、または Picturefill の使用を維持しながら画像を遅延ロードするその他の方法に関するアイデアはありますか?

私はSingularityで以下を構築しました

幅 2/3 の画像の隣に幅 1/3 の画像があり、次の行ではその逆です。画像はピクチャーフィルで提供されます。しかし、私の問題は、コンテナーの最大幅からブレークポイント (750px) に向かってビューポートを絞り込むときです。そこでは、画像が 2 つの「列」レイアウトから 1 つの列に切り替わり、ソース ファイルの物理的なサイズがまったく同じでも高さが異なります。ピクセル単位の高さ。場合によっては数ピクセル、場合によっては 1 つだけ異なります。

背後にある削減されたセットアップは次のとおりです (Retina マークアップとその間の 2 つのブレークポイントが省略されています)。

ブレークポイントと特異点の設定は次のとおりです。

スタイリング:

最大幅での 3 分の 1 の画像と 3 分の 2 の画像の高さの間は、物理的に同一であり、一番下の行に配置されます。小さいビューポートでは異なります。写真が入ったガターを取り外しても、高さはまだ異なります。例えば

ピクチャフィル マークアップの代わりに記事タグを空にして、これらの 2 つのプロパティを scss に追加すると、高さが 1/3 か 2/3 かに関係なく、すべての記事要素でまったく同じになります。

ガター付き:

なし:

ビューポートの高さの違いがどのように変化するのか、誰にも考えられますか? 私自身は完全にアイデアがありません。:(

よろしくラルフ