React + Picturefill的推荐使用方法
我想使用Picturefill + React + React路由器(也使用Webpack)。
上下文:目前还没有同构的体系结构，因此数据是在初始页面加载(路由更改)后获取的。
…正因为如此，呈现方法被调用了两次。
- 一次为默认状态
- 一次用于更新状态(获取数据)
代码
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();
}- 在Safari8.0.8中工作(仅在页面加载时调整大小，而不是)
- 在Chrome 45中工作
- 在Firefox 40.0.3中工作(仅用于刷新，而不是调整大小)
更多的信息/选择？
回答 2
Stack Overflow用户
发布于 2015-09-23 18:57:39
我建议您将皮图填充3.0 RC1与突变插件结合使用。这样您就不需要调用picturefill();，一切都是自动完成的。
这在任何浏览器中都是可行的。
Stack Overflow用户
发布于 2015-09-22 22:30:07
此解决方案与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中工作(仅用于刷新，而不是调整大小)
更新：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来说，内容的闪存仍然存在..。但现在显示了alt文本..。
至于require('picturefill/dist/plugins/mutation/pf.mutation');
此插件自动检测任何DOM突变，并自动填充新的或更改的响应图像。它还增加了对响应性图像IDL属性/属性的支持。如果您有一个高度动态的网站或SPA，您可能想要使用这个插件。(此插件不适用于IE8。)
https://stackoverflow.com/questions/32727921
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号