问题标签 [picturefill]

（先发制人：如果您想将此标记为重复，请注意其他问题似乎在问“我为什么会收到此错误？”我知道为什么会收到此错误；我想知道我是如何可以检测到我的 JavaScript 代码中的错误。它只出现在 Firebug 控制台中，当然，在加载图像时对用户来说是显而易见的。）

我正在为响应式图像使用图片填充。我有一个为图像上的加载事件触发的回调。因此，每当有人调整浏览器窗口的大小以便通过图片填充加载不同的图像时，回调就会运行。

在回调内部，我通过画布将图像数据转换为 dataURL，这样我就可以将图像数据缓存在 localStorage 中，即使用户离线也可以使用它。

注意关于“离线”的部分。这就是为什么我不能依赖浏览器缓存。而且 HTML5 离线应用程序缓存不能满足我的需求，因为图像是响应式的。（有关响应式图像与 HTML 离线应用程序缓存不兼容的解释，请参阅“应用程序缓存是一个混蛋”。）

在 Mac 上的 Firefox 14.0.1 上，如果我将浏览器的大小调整为非常大的大小，然后在大图像有机会完全加载之前再次将其调整回较小的大小，则会触发加载图像。它最终在 Firebug 控制台中报告“图像损坏或截断”，但不会引发异常或触发错误事件。没有迹象表明代码中有任何问题。就在 Firebug 控制台中。同时，它将截断的图像存储在 localStorage 中。

如何在 JavaScript 中可靠有效地检测到此问题，以便不缓存该图像？

以下是我如何遍历图片填充 div 以查找图片填充已插入的 img 标签：

这是cacheImage()回调的样子：

最后，这是我在 Firebug 中看到的全文，更改了 URL 以保护有罪者：

图片损坏或截断：http ://www.example.com/pf/external/imgs/extralarge.png

我有一个单页文档，其中包含仅需要在 Android 2.3 手机和 IE8/9 上加载的几张图片，因为 picturefill.js 项目在这些设备上无法正常工作。

我在我的图片填充代码实例之一中成功使用了此脚本：

我需要在页面上多次使用它，但是当我多次粘贴上面的确切代码时会出现问题。

有没有办法将上述内容变成一个函数，可以调用该函数来为唯一图像的每个实例调用不同的图像？我需要使用上面的脚本在页面上调用至少 6 个独特的图像。

我正在为我的 tumblr 页面编写一个小jQueryjQuery.get()脚本，该脚本通过我想要从站点的下一页（它是一个tumblr站点，所以分页可以）的内容来模拟无限滚动加载。
我知道有一些无限滚动插件，但我尝试过的所有插件都不适合我，而且非常胖。我不需要所有的功能。该脚本会加载我想要的新元素，是的，但问题是每次都从两个页面加载内容。而且，显然，它应该只加载单个页面内容。

jQuery是 ：

它加载的内容是：

我将Picturefill用于响应式图像，效果很好。有人有想法吗？谢谢。

我第一次使用 Picturefull，我不确定我是否理解正确。如果我用..

图像不显示。但是如果我使用..

图像确实出现。我想使用 -webkit-min-device-pixel-ratio: 2.0。有人可以向我解释如何正确使用它吗？谢谢你。

后代的原始问题（请参阅更新）

我有一个 Angular.js 网站，我正在建立一个响应式网站。我也想为不同的浏览器宽度使用单独的分辨率图像。所以，我偶然发现了Picturefill.js，这似乎可以完美地工作。

唯一的问题是picturefill.js只有在加载 DOM 后才有效。我正在为这个特定页面使用 Angular 模板和部分 HTML 页面，所以除非我调整浏览器窗口的大小，否则我的图像不会加载。

这是 picturefill 的 github 页面上的一个值得注意的问题（第 35 号），但他们似乎认为这没什么大不了的，并将其关闭。那里有一个关于如何使图片填充的延迟加载工作的建议，但恐怕它超出了我的想象。

这里是 的源代码picturefill.js链接。如果需要，我可以包含我的代码，但这似乎更多的是库的问题，以及它的使用方式。

更新：对于其他试图弄清楚这一点的人，我发现了一个AngularJS 指令，用于合并响应式图像。这是非常新的，我无法让它工作，但它似乎有希望。

第二次更新：这个指令确实有一个错误，但这已经被修复了。它现在可以在我的 AngularJS 网站上正常运行。但是，如果您在项目中使用动态路由，则此指令不太有效。所以，在我的例子中，我有一个动态路由app/:objectID，每页拉一个 JSON 对象（然后每个页面都有一个像 app/1、app/2 这样的 URL，用于对象 1 和对象 2）。由于该路线从未真正改变过，我认为该指令未能重新启动。

我的 hack 我不明白？更改waiting = true为waiting = false第 97 行。我找不到任何缺点/副作用，它使指令适用于我的用例。

我正在一个 WP 网站上工作，其中包含一些带有 Google Analytics 点击事件的促销/广告滑块。效果很好，现在我想以正确的分辨率提供正确的图像。

我正在使用图片填充来提供图像。硬编码时工作正常，所以我知道它有效。当我尝试使用 WP 上传的图像获取图像源时，没有。我知道这是由于我的（缺乏）php 技能。

图片填充需要什么：

我将 url 或 id 或图像存储在：$attachment_id

我想这样做：

get_field ('advimg'); 来自ACF。

但它不起作用。我玩过：

wp_get_attachment_image_src wp_get_attachment_image_url wp_get_attachment_image_link

我必须在星期五度过，因为它不起作用，并且有些东西对我说这并不难......我只是今天没有看到它。

希望各位大佬可以投稿。

提前致谢，

/保罗

编辑/最终代码/修复

I'm creating a website which has the Royal Slider HTML version. I want to use picturefill to load the image optimized for the current resolution viewed. But I have problems getting it to work. It works while I serve the images via a normal WP_Query.

I've read this thread, but that did not help me, anybody an idea?

Thanks, /Paul

edit: 28-06 09:40

Got in contact with developer... so he gave some tips. One of them was to make sure picturefill initializes before the slider. With that he means, at least I think, that picturefill.js needs to be loaded before the royalslider files.

Still no luck though. Oh en made a little change in the code due:

does not follow the slider syntax.

我正在使用 picturefill.js (Scott Jehl)：https ://github.com/scottjehl/picturefill/blob/master/picturefill.js

这是我设置它的方式，（一些代码省略了 b/c 它只是更多的媒体查询内容）使用跨度标签和数据属性，如他的文档中所示：

正如预期的那样，正在加载正确的 img 并将其放置在页面上。这是生成的 HTML 的片段：

我想做的是向最终生成的任何 img 标签添加一个类。

但是，我什至无法选择附加的 img！这是我正在使用的：

即使图像在页面上，这也会返回 0。我期望它根据媒体查询返回大小为 1 的 b/c，其中 1 个图像被附加到带有图片填充的页面。

为了确保 DOM 加载没有问题，我将 picturefill.js 放在页眉中（即使 JS 大部分时间应该放在页脚中），甚至这样做：

似乎仍然没有找到img。

我想知道你如何将lazyload.js 与Picturefill 结合起来，当lazyload 的图像语法需要img 标签和data-original 时，而Picturefill 的语法没有这些功能。

例如，这是我使用 Picturefill 对图像进行的标记：

不知道我将把lazyload.js 需要的类属性放在图像标签或data-original 属性上的位置。关于如何与 Picturefill 一起实现lazyload.js 的任何想法，或任何其他在保持使用 Picturefill 的同时延迟加载图像的方法？

我在 Singularity 中构建了以下内容

1/3 宽图像旁边是 2/3 宽图像，下一行则相反。图像配有图片填充。但是我的问题是，当我将视口从容器最大宽度缩小到断点（750px）时，图像从两个“列”布局切换到一列，即使源文件具有完全相同的物理高度，它的高度也不同像素高度。它们有时相差几个像素，有时只有一个。

后面的简化设置如下（省略了视网膜标记和中间的 2 个断点）：

断点和奇点设置如下：

样式：

在最大宽度的三分之一和三分之二图像的高度之间，它们在物理上是相同的，并且它们在底线对齐。在较小的视口上，它们有所不同。如果我移除带有图片的排水沟，高度仍然不同。例如

如果我使用，而不是图片填充标记，只需清空文章标签并将这两个属性从上方添加到 scss，无论它们是 1/3 还是 2/3，所有文章元素的高度都保持完全相同。

带排水沟：

并且没有：

有谁知道什么可能导致视口上的高度差异？我自己完全没有想法。:(

最好的问候拉尔夫