javascript - 通过 AngularJS 加载时,动画 GIF 无法在 Firefox 中播放

标签 javascript html angularjs firefox animated-gif

我是 Angular 1 的初学者。我的 Controller 中有一个函数可以根据 HTML 表单中的某些参数生成各种动画 GIF 文件的 URL。然后我有一个应该显示 GIF 文件的 img 标签,如下所示:

<img alt="preview" src="{{ctrl.previewURL()}}"/>

基本上,它有效。当我更改输入字段中的值时,图像会相应更新。然而,在第三张图片以这种方式加载后,GIF 停止播放它们的动画(尽管正确的文件仍在加载),只显示一帧。无论我尝试以何种顺序加载它们,都会发生这种情况,因此这不是文件本身的问题。

有趣的是,这个问题似乎只出现在 Firefox 中(我使用的是 48 版)。这一切都在 Microsoft Edge 中完美运行。我还没有机会尝试其他浏览器。

有没有办法让它在 Firefox 中也能正常工作?或者是否有更好的做法来使用 Angular 做这样的事情?

最佳答案

代替 src 使用 ng-src

浏览器首先将 src 视为“{{ctrl.previewURL()}}”,直到 Angular 开始工作,所以使用 ng-src 并且图像将仅以 Angular 加载。

你的代码:

<img alt="preview" ng-src="{{ctrl.previewURL()}}"/>

关于javascript - 通过 AngularJS 加载时,动画 GIF 无法在 Firefox 中播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38815333/

相关文章:

javascript - 使用 promises 串联运行异步函数

javascript - 使用 ng-class 和 ng-change 在元素中动态设置类

javascript - 将单独的 JSON 数据组绑定(bind)到用户 ID 号 AngularJS

angularjs slick js carousel ng-click 不使用响应属性设置触发

html - 水平导航栏中的等长中心对齐列表项

javascript - 为什么此代码不适用于单独的 javascript?

php - 将变量发送到我的 PHP 文件 - 由于某种原因它们为空

javascript - 如何编写 systemmd 脚本来运行 ember 服务器?

javascript - 单击按钮后如何禁用拖动功能

php - 000webhost.com的“自定义错误”页面不起作用?