问题标签 [picturefill]

I've used Picturefill to load a couple of images on my web page. They display correctly in Chrome but don't display at all in Internet Explorer 8.

Here is a sample of my code:

(I'm including the top part in case my file linking is part of the problem).

I can view the demo in IE 8: http://scottjehl.github.io/picturefill/examples/demo-02.html. But the images on my page aren't working.

Here is what I tried:

1. I copied and pasted the code from the demo into my page (changing the image paths to absolute) - they did not display.
2. I added script to create a <picture> element (although I'm using Modernizr, so it should not be needed).

3. I added a src path to the img tag, which worked, but I read that Picturefill doesn't recommend this.

我正在使用 picturefill.js 库在不同的屏幕宽度上提取不同尺寸的相同图像。

困境是我应该记住所有移动设备、平板电脑、台式机创建的图像数量应该是多少？通过这样做，我想节省带宽。

现在，我正在创建具有不同以下尺寸的相同图像。图像大小以像素为单位

如果我创建所有尺寸的图像并使用图片填充 JS 加载它，它会对性能有什么影响吗？

我这里有一个 Flexslider 画廊，它使用延迟加载和图片填充，效果很好，这要感谢这里社区以前的帖子。

我遇到的唯一问题是，当我单击画廊的最后一个缩略图时，滑块会滑到该幻灯片上，但尚未加载任何内容。谁能帮我解释这里的逻辑？

我在想也许在滑动之前检查被点击的拇指是否有加载的图像，如果没有，加载图像并做你的事情？

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

我正在尝试在我的 wordpress 主题中实现响应式图像。有一些插件可用，但我尝试过的插件弄乱了我的布局。

我基本上想做的是用响应式图像替换所有现有图像（不仅是特色图像或缩略图），或者使用 srcset 或

我的 wordpress 主题创建以下图像大小：

我试图用 preg_replace 函数替换 img 标签，但我从未设法捕获所有图像，我不确定这是否是最好的方法。我的一些图像有课程，有些没有。

最后，我想替换一个像这样的简单图像：

通过这样的事情：

srcset 等效项也可以。

谢谢！洛朗

在picturefill.js中，除了上面指定的以外怎么写？

下面，除了上述（小于屏幕宽度480px）之外，要写什么以及如何指定条件？

※想指定thumb.jpg

有些写模式A和模式B之间的区别？

哪个是对的？

模式 A

模式 B

我一直在使用以下标记：

这与图片填充（http://scottjehl.github.io/picturefill/）非常完美，并且不会产生任何跨客户端问题。

我只是想知道是否有人可以确认这是支持使用内联视网膜图像的有效标记。我使用它的原因如下：

1. 图片是内容的一部分，所以不能使用背景图片。
2. Google 不会索引 srcset-attribute，但会索引 src-attribute，这就是我同时使用两者的原因。所以这主要是一个SEO考虑。
3. 据我测试，我还没有发现浏览器发送双重 HTTP 请求。它请求普通桌面上的 src-image 和视网膜显示器上的 srcset-retina (2x) 图像。

我几乎找不到任何关于使用 src 以及 srcset 和 picturefill 与 SEO 和视网膜显示相关的信息。所以如果这个标记没有缺陷，那么我希望更多的人可以使用这种方法来响应和 SEO 友好的图像。

我正在使用 Picturefill v2.3.1 并且想知道是否有人知道用链接包装图片标签的方法，该链接也对视口宽度做出反应？我的代码目前是这样的：

因此，例如，我希望前两种尺寸（中）的“a href”中有一个 url，然后对于小尺寸（后两种）根本没有 url。

任何人都知道这是否可能以某种方式？

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

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

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

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

代码

示例 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 容器。我想如何将显示的页面填充到容器中？