4

我想使用 Picturefill + React + React Router（也使用 Webpack）。

上下文：尚无同构架构，因此在初始页面加载（路由更改）后获取数据。

…因此，渲染方法被调用了两次。

  1. 一次为默认状态
  2. 一次用于更新状态（获取的数据）

代码

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（仅在刷新时，不适用于调整大小）

更多信息/替代方案？

4

2 回答 2

4

我建议您将图片填充 3.0 RC1与突变插件结合使用。这样你就不需要打电话picturefill();了，一切都是自动完成的。

这适用于任何浏览器。

于 2015-09-23T18:57:39.820 回答
2

此解决方案适用于 Webpack，并实现与上述示例 1中的推荐用法相同的功能。

似乎picturefill()将在第一次渲染期间初始化（未定义 src），然后在第二次渲染期间跳过（定义了 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（仅在刷新时，不适用于调整大小）

更新：2016 年 4 月 28 日

现在使用 React 的同构渲染，所以这个解决方案对我不起作用。

  1. 不能import 'picturefill';，因为依赖window于节点中不可用的。
  2. picturefill();，见下文，不适componentDidUpdate用于 Safari (9.0.3)。
  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，内容的闪存仍然存在......但现在显示 alt 文本......

至于require('picturefill/dist/plugins/mutation/pf.mutation');：

这个插件会自动检测任何 DOM 突变并自动填充新的或更改的响应图像。它还增加了对响应式图像 IDL 属性/属性的支持。如果你有一个高度动态的网站或 SPA，你可能想要使用这个插件。（此插件不适用于 IE8。）

于 2015-09-22T22:30:07.743 回答