2016-08-07 91 views
2

Ich bin ein Anfänger mit Angular 1. Ich habe eine Funktion in meinem Controller, die URLs zu verschiedenen animierten GIF-Dateien abhängig von einigen Parametern in einem HTML-Formular generiert. Ich habe dann ein img Tag, dass die GIF-Datei zeigen soll, wie folgt aus:Animierte GIFs spielen nicht in Firefox, wenn über AngularJS geladen

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

Grundsätzlich funktioniert es. Wenn ich die Werte in meinen Eingabefeldern ändere, wird das Bild entsprechend aktualisiert. Nachdem das dritte Bild auf diese Weise geladen wurde, hören die GIFs jedoch auf, ihre Animationen abzuspielen (obwohl die richtigen Dateien noch geladen werden) und zeigen nur ein Bild an. Dies geschieht unabhängig von der Reihenfolge, in der ich versuche, sie zu laden. Es ist also kein Problem mit den Dateien selbst.

Interessanterweise scheint dieses Problem nur in Firefox zu erscheinen (ich verwende Version 48). In Microsoft Edge funktioniert alles einwandfrei. Ich hatte noch keine Gelegenheit andere Browser zu testen.

Gibt es eine Möglichkeit, dies auch in Firefox zum Laufen zu bringen? Oder gibt es eine bessere Übung, um so etwas mit Angular zu machen?

Antwort

0

Statt src Verwendung ng-src

Der Browser des src als „{{ctrl.previewURL()}}“ auf den ersten sehen, bis Winkel Beginn der Arbeit so ng-src verwenden und das Bild wird mit Winkel geladen werden nur .

Code:

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

versuchte es einfach und bekam eine leichte Verbesserung: Die Bilder, die ich immer noch versuchen, zunächst eingefroren erscheinen zu laden (mit Ausnahme der ersten zwei), aber wenn ich versuche, die gleichen, die zu laden wieder werden sie richtig gespielt. Leider löst das Problem leider nicht wirklich. Ich spreche nur über Firefox hier, in Edge funktioniert es in jeder Hinsicht. – Andii

+0

Auch, nachdem ich es zurück in 'src' geändert habe, verhält es sich plötzlich genauso ... – Andii

+0

Nach einigem googeln sehe ich, dass es ein häufiger Bug mit Firefox ist. – kobe