问题标签 [picturefill]

这是一个小样本： http ://cdpn.io/Gpdyx

它包含来自以下位置的 PictireFill 脚本：

https://github.com/scottjehl/picturefill

以及尝试将.copy元素的高度设置为与图像高度相同的小型 jQuery 代码。

问题是当 PictureFill 发挥作用时——当 jQuery 触发文档就绪脚本时，图像显然没有加载——因此它无法设置正确的.copy高度。但是当您调整浏览器的大小时 - 一切正常，因为图像已经存在。

当 PictureFill 加载图像并触发我的 resizeAction 函数时，我如何检测到一个动作，以便一切顺利进行？

附言。代码笔被简化到最大。PicruteFill 可能有多个图像作为参数（不同浏览器宽度的不同尺寸等），并且可能有多个部分作为示例工作 - 所以解决方案应该是通用的。

Edit2：正如我所建议的那样，我使用了 imagesLoaded - 它几乎可以工作......除了第一次加载图像时在 firefox 上它不会正确触发。在 Chrome 上一切正常。有什么建议么？

如何使用picturefill提供视网膜图像？

目前我正在使用第二版的picturefill.js，它作为一个polyfill。

我的 HTML 代码是：

问题是：所有浏览器（Chrome 除外）都获得了“2x”版本，但我的屏幕不支持视网膜。

我认为 Chrome 正在运行，因为此功能是最近实施的。

我究竟做错了什么？

我遇到了一个问题，我正在努力寻找最佳解决方案。

我有一个非常矩形的 SVG，我有 3 个版本，例如桌面/平板电脑/手机

最初，我一直在使用<picture>带有标签的元素<source>并链接到 SVG。尽管以这种方式完成后，在移动 chrome 上，图像不会保留其矩形形状，而是将其强制为正方形。如果我设置了最大高度，那么所发生的一切就是 svg 图稿被压扁和模糊，并且 SVG 顶部和底部的空白区域仍然存在。

但是，在桌面上我从来没有遇到过这个问题。

当我将<svg>标签与<image>元素一起使用时，所有问题都消失了，只要我设置了最大高度，它就可以全面工作，尽管我无法以<picture>这种方式使用元素，这意味着我无法使用方便的媒体查询属性。

最后一件事，我还没有尝试过，因为我不希望它以这种方式实现，将 SVG 设置为块元素的背景。

我感谢任何有经验的输入，也许有人比我有更多的 SVG 跨平台知识！

当想要为用户设备提供最合适的图像时，潜在资源列表可以在大小/比率/像素密度等方面快速增长。

使用图片填充，我们可以使用多个srcset属性将特定资产定位到给定规则。我目前正在处理的一个示例如下所示：

这当然不可怕，但它又开始变得非常冗长了。为同一图像指定了 6 个不同的来源，并且仅包括 2 个“双密度”视网膜图像。我们还需要提供一个非常虚假的<video>标签以避免 IE9 问题。

我们应该为所有图像尺寸提供双密度资源，还是明确假设 2x 图像显示仅在某些屏幕分辨率下可用（这似乎是一个很大的假设）。

同样，我们是否应该为我们的任何/所有资源提供 3 倍的图像分辨率？

如果其中任何一个的答案是肯定的，我们可以看到对于一组非常标准的目标设备宽度（这些是 Bootstrap xs、sm和值） md，lg我们很可能最终不得不为每个“图片”提供 8 个甚至 12 个资源.

那么，这仅仅是当前最好的状态吗？（图片填充肯定有帮助）。还是试图为每一个过度设计问题的可能性指定一个特定的资源？

更新 有关最近的方法，请关注响应式图像社区组的进展

我正在尝试为我的网站使用图片填充，但两个版本似乎都不起作用。

在我的页面头部：

我有两张图片，welcome.jpg 用于较大的图像，welcome_sm.jpg 用于较小的图像：

我需要做任何其他事情才能让它工作吗？我没有看到任何东西，因为我的浏览器上启用了 Javascript，这当然消除了由于 noscript 标记而导致的回退。

我究竟做错了什么？

我的网站是 novuslandscapes dot com

谢谢，

约翰

我正在使用Assemble，它目前使用 Handlebars 1.3。在我的模板中，我使用带有Picturefill的图片元素，它使用当前的规范<picture>语法：

由于这部分内容可能会发生变化（例如，我可能会添加媒体查询），我希望能够轻松地在我的整个网站上更新这个片段。我认为部分将是最好的。例如，类似：

有了这个部分

有没有办法用我的 Handlebars 版本做到这一点？我知道这是 Handlebars 2.0 中的原生版本，但不幸的是我无法将其更新到该版本，因为它已集成在 Assemble 中。或者有另一种推荐的方法吗？

ps：我已经阅读了有关使用{{> picture this}} here的信息，但我不确定它是否以及如何在一页中处理多张图片（以及一个部分中的多个变量）。另外，我尝试使用parseJSON block helper，但这种语法有点尴尬，而且比我上面描述的更冗长，所以我想知道是否有更有效的方法来做这样的事情。

我正在使用图片填充（https://github.com/scottjehl/picturefill）来获取响应式图像。

我有一个页面，我想在高于 750 像素但不低于 750 像素时显示图像（即根本不在移动设备上加载图像）。

我的代码：

这种代码是可行的——因为 src 没有加载到较小的屏幕上（仅显示 alt 文本）。但是，理想情况下，我希望浏览器甚至不在移动设备上查找图像。我怎样才能做到这一点？

当使用 Picturefill 2 时，我会在页面加载时在图像上跳转布局，例如，当您没有在普通图像上指定高度时。这是 Picturefill 所期望的吗？有没有办法解决这个问题？谢谢。

我一直在研究 RoyalSlider 和 Picturefill 的实现，它在所有浏览器中都运行良好。但是，我注意到当图片填充在页面上运行时，最新的 Chrome Canary 不再src向 img 标签添加正确的属性。这与目前所有其他浏览器不同，我认为这与 srcset 现在在 canary 中被原生支持有关，但 caniuse 说它自 v34 起就在 Chrome 中得到支持，我在 Chrome 上没有任何错误。

基本上，现在 Canary 上的实现对我来说已经被破坏了，因为 RoyalSlider 会寻找一个 src 属性来创建滑块。由于没有，RS 无法创建滑块，我只获得了预加载器。

这里有一些截图说明了我的意思http://imgur.com/a/8wo1b

请注意在 Canary 中，即使该srcset属性仍然存在small.jpg，即使显示的图像是large.webp.

我需要找到一种方法来告诉 RS 要加载哪个图像，目前这似乎几乎是不可能的，因为 DOM 中没有任何改变指定哪个文件图片填充（或可能是 Canary）被认为适合使用。

我在理解如何使用Picturefill实现视网膜图像时遇到了一些麻烦

这就是我所拥有的......而且我认为它不起作用：

media-queires 拉出 2 倍大的图像。对于 Android 设备，将其设置为 1.5。