javascript - React + Picturefill のおすすめの使い方

Question

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

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

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

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

コード

render: function () {
    return (
        <picture>
            <!-- You get the idea -->

            <source srcSet={this.props.large} media="(min-width: 1024px)" />
            <source srcSet={this.props.medium} media="(min-width: 640px)" />
            <img srcSet={this.props.small} />
        </picture>
    );
}

例 1:

<head>
    <!-- Recommended usage -->
    <script src="https://cdn.rawgit.com/scottjehl/picturefill/2.3.1/dist/picturefill.js"></script>
</head>

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

例 2:

// Use picturefill JavaScript API
componentDidUpdate() {
    picturefill();
}

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

詳細情報/代替案?

score 4 · Accepted Answer

ミューテーションプラグインと組み合わせて、picturefill 3.0 RC1を使用することをお勧めします。この方法では、を呼び出す必要はありません。すべてが自動的に行われます。picturefill();

これはどのブラウザでも機能します。

score 2 · Accepted Answer

このソリューションは Webpack で動作し、上記の例 1の推奨される使用法と同じ機能を実現します。

最初のレンダリング中に初期化され（srcが定義されていpicturefill()ない場合）、2番目のレンダリング中にスキップされるようです（srcが定義されている場合）。

そのため…データを取得するまで、画像要素のレンダリングを防止することは機能しているようです。

componentDidUpdate: function () {
    picturefill();
},

render: function () {
    return (
        <div>
            {(function () {
                // You get the idea…
                if (this.props.large === undefined) {
                    return '';
                }

                return (
                    <picture>
                        <!-- You get the idea… -->

                        <source srcSet={this.props.large} media="(min-width: 1024px)" />
                        <source srcSet={this.props.medium} media="(min-width: 640px)" />
                        <img srcSet={this.props.small} />
                    </picture>
                );
            }.bind(this)())}
        </div>
    );
}

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

更新: 4/28/16

現在、React で同形レンダリングを使用しているため、このソリューションは機能しません。

ノードで使用できないimport 'picturefill';依存関係のため、できません。window
picturefill();componentDidUpdate、以下を参照してください。Safari (9.0.3)内では機能しません。
<picture>以前に説明した戦略は、間違った画像 (fowi) のフラッシュのために機能しませんでした。

/**
 * OLD
 */

export class MyComponent extends Component {
  componentDidMount() {
    // TODO: remove when updated https://github.com/scottjehl/picturefill/pull/556
    const picturefill = require('picturefill');

    picturefill();
  }
}

/**
 * NEW
 */

// TODO: remove when updated https://github.com/scottjehl/picturefill/pull/556
if (__CLIENT__) {
  require('picturefill');
  require('picturefill/dist/plugins/mutation/pf.mutation'); // not sure if this does anything
}

export class MyComponent extends Component {}

画像は次のように更新されました。

<picture>
  <source media="(min-width: 640px)" srcSet={'...'} />
  <source srcSet={'...'} />

  {/* SEE: http://scottjehl.github.io/picturefill/#fowi-safari */}
  <img alt={title} />
</picture>

Safariの場合、コンテンツのフラッシュはまだ存在します...しかし、代替テキストが表示されます...

に関してはrequire('picturefill/dist/plugins/mutation/pf.mutation');：

このプラグインは、DOM の変異を自動的に検出し、新規または変更されたレスポンシブ画像を自動的にポリフィルします。また、レスポンシブイメージの IDL 属性/プロパティのサポートも追加されています。非常に動的な Web サイトまたは SPA をお持ちの場合は、おそらくこのプラグインを使用することをお勧めします。(このプラグインは IE8 では動作しません。)

javascript - React + Picturefill のおすすめの使い方

コード

例 1:

例 2:

2 に答える 2

Related

Reference