4

后代的原始问题(请参阅更新)

我有一个 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 = truewaiting = false第 97 行。我找不到任何缺点/副作用,它使指令适用于我的用例。

4

2 回答 2

4

看看角度图片。受@Tina自己的启发,它使用Polyfill 2.0语法,即新的HTML5picture元素。

于 2014-11-02T04:36:59.753 回答
0

我还想将 Picturefill 与 AngularJS 一起使用,但我没有尝试提到的其他解决方案,而是决定开发这个 AngularJS 指令以将 Picturefill 与 AngularJS 一起使用。提供了有关其实现的说明以及演示。它适用于示波器提供的静态和动态数据,并且可以使用 bower 安装。

于 2014-02-16T23:27:41.367 回答