問題タブ [picturefill]

こちらのコミュニティからの以前の投稿のおかげで、かなりうまく機能するピクチャーフィルと一緒に遅延読み込みを使用する Flexslider ギャラリーがここにあります。

唯一の問題は、ギャラリーの最後のサムネイルをクリックすると、スライダーがそのスライドにスライドしますが、まだ何もロードされていないことです。ここでロジックを手伝ってくれる人はいますか?

クリックされた親指に読み込まれた画像があることを確認してからスライドする前に、そうでない場合は画像を読み込んでください。

http://codepen.io/anon/pen/OVveXK

しばらくの間、次のマークアップを使用しています。

これは、picturefill ( http://scottjehl.github.io/picturefill/ ) で完全に機能し、クロスクライアントの問題は発生しません。

これがインライン網膜画像の使用をサポートする有効なマークアップであることを誰かが確認できるかどうか疑問に思っていました. 私は次の理由でこれを使用します。

1. 画像はコンテンツの一部であるため、背景画像は使用できません。
2. Google は srcset-attribute をインデックスに登録していませんが、src-attribute をインデックスに登録しているため、両方を使用しています。したがって、これは主に SEO に関する考慮事項です。
3. これをテストした限りでは、ブラウザが二重の HTTP リクエストを送信していることはわかりませんでした。通常のデスクトップでは src-image を要求し、Retina ディスプレイでは srcset-retina (2x) イメージを要求します。

SEO と retina-display に関連して、src を srcset および picturefill と一緒に使用することに関する情報はほとんど見つかりません。したがって、このマークアップに欠陥がなければ、レスポンシブで SEO に適した画像に対してこのアプローチを使用する人が増えることを願っています。

Picturefill + React + React Router を使用したい (Webpack も使用)。

コンテキスト: 同形のアーキテクチャはまだないため、最初のページの読み込み (ルートの変更) 後にデータがフェッチされます。

…このため、render メソッドが 2 回呼び出されています。

1. デフォルト状態に 1 回
2. 更新された状態 (フェッチされたデータ) に対して 1 回

コード

例 1:

• Safari 8.0.8 で動作
• Chrome 45 で動作
• Firefox 40.0.3 で動作します (サイズ変更ではなく、更新時のみ)

例 2:

• Safari 8.0.8 で動作します (ページの読み込みではなく、サイズ変更時のみ)
• Chrome 45 で動作
• Firefox 40.0.3 で動作します (サイズ変更ではなく、更新時のみ)

詳細情報/代替案?

• https://github.com/scottjehl/picturefill
• https://github.com/ldesplat/react-picture

ページは IE11 でのみ表示される画像なしで読み込まれますが、断続的にブラウザーのサイズを変更すると、それに応じて更新されます (1/3 読み込み)。これを他のブラウザで再現することはできません。srcset は、静的コンテンツに対して単独で正常に動作します。

これは、IE11 で動作しないPlunker の例です。

または、すばやく簡単に、使用している実際の img html:

画像または周囲の div には、トランジション、シャドウ、または不透明度が適用されていません。

html は、角度を渡して srcset 属性を正しく書き換えることで正常にレンダリングされます。画像は表示されず、alt タグのみが表示されます。これが断続的なコールスタックの問題である可能性があるかどうか疑問に思っています.Angularがダイジェストなどを終了する前に、Picturefillのロードと競合状態になる可能性があります.

事前に乾杯！

DevExpress raport.cs と DocumentViewer コンテナーがあります。表示されたページをコンテナにどのように埋めますか?